前端基础 - JQuery实现省级联动

上山打老虎

　　JQuery实现省级联动　　效果图：

　　代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 定义二维数组:
var arr = new Array(4);
arr[0] = new Array("哈尔滨", "齐齐哈尔", "大庆", "佳木斯");
arr[1] = new Array("长春市", "吉林市", "四平市", "通化市");
arr[2] = new Array("沈阳市", "锦州市", "大连市", "铁岭市");
arr[3] = new Array("郑州市", "洛阳市", "安阳市", "南阳市");
</script>
</head>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
//获取省份对象  派发change事件
$("#pro").change(function() {
//清空市的下拉选中的内容
//$("#city").empty();
$("#city").html("");
//获取省份的value值
var $flag = $(this).val();
//通过value值获取对应省份的市的数组
var cityArrObj = arr[$flag];
//遍历市的数组
$(cityArrObj).each(function() {
//把遍历后的市  添加到市的下拉选中
//html的方式会覆盖
//$("#city").html("<option>"+this+"</option>");
//文档操作的时候是追加
$("#city").append("<option>" + this + "</option>");
})
})
});
</script>
<body>
<form action="#" method="get">
<select id="pro">
<option>-请选择-</option>
<option value="0">黑龙江</option>
<option value="1">吉林</option>
<option value="2">辽宁</option>
<option value="3">河南</option>
</select>
<select id="city">
<option>-请选择-</option>
</select>
</form>
</body>
</html>

[jQuery] 前端基础 - JQuery实现省级联动

相关帖子

学会这些linux的“自动化”轻松搞定任务

Linux下玩转nginx系列（八）---如何使用upsync模块实现动态负载均衡

种草 Vue3 中几个好玩的插件和配置

Mysql8导入数据到Mysql5.7的实现步骤

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

javascript怎么实现窗口置顶

JavaScript怎样实现点击出现图片效果

使用原生querySelectorAll和forEach来实现点击切换

免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

上山打老虎 LV4