逻辑
1.首先来两个下拉列表，一个是省份列表，一个是城市列表，将来这些列表内容都是从数据库读取到数据通过使用html(...)动态向select元素中填充option元素，这里的省份列表直接写死了，存储城市的存储结构使用的是数组。
2.给省份列表绑定change事件(内容改变事件)
3.当省份内容发生变化时，获取对应option(就是当前选中元素this)中的value值
4.根据value值在数组中找到省份对应的所有城市，通过html(..)将每一个option填充到city的下拉列表中，达到不同的省份显示不同城市效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市级联</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<select id="province">
<option>--请选择省份--</option>
<option value="0">北京</option>
<option value="1">浙江省</option>
<option value="2">河北省</option>
<option value="3">广东省</option>
</select>
<select id="city"> </select>
</body>
</html>
<script>
$(function() {
//创建二维数组存储省份和对应的城市
var cityList = new Array();
cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
$("#province").change(function() {
//获取到城市的下拉列表框
var city=$("#city");
//先去清空原有的列表内容
city.html("");
var arr=cityList[$(this).val()];
var str="";
for(var i=0;i<arr.length;i++){
str+='<option value=' +arr[i]+ '>'+arr[i]+ '</option>';
}
city.html(str);
});
});
</script>
377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
