前端基础 - JQuery实现省级联动
JQuery实现省级联动 效果图：代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 定义二维数组:
var arr = new Array(4);
arr = new Array("哈尔滨", "齐齐哈尔", "大庆", "佳木斯");
arr = new Array("长春市", "吉林市", "四平市", "通化市");
arr = new Array("沈阳市", "锦州市", "大连市", "铁岭市");
arr = 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>
文档来源：51CTO技术博客https://blog.51cto.com/u_15294985/2999295
页:
[1]