<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="sheng" onchange="selectSheng(this);"></select>
<select id="city" onchange="selectCity(this);"></select>
<select id="qu"></select>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
var lis = new Array(2);
lis["湖北省"] = ["武汉市", "襄樊市"];
lis["湖南省"] = ["长沙市", "浏阳市"];
lis["湖北省"]["武汉市"] = ["洪山区", "江夏区", "武昌区", "汉口区"];
lis["湖北省"]["襄樊市"] = ["樊城区", "襄城区"];
lis["湖南省"]["长沙市"] = ["厂区", "杀区"];
lis["湖南省"]["浏阳市"] = ["溜区", "羊区"];
$(function() {
var ss = '<option value="请选择省份">请选择省份</option>';
$("#sheng").append(ss);
for(var l in lis) {
$("#sheng").append('<option value="' + l + '">' + l + '</option>')
}
});
function selectSheng(p) {
//清空城市和区域
$("#city").empty();
$("#qu").empty();
var ss = '<option value="请选择城市">请选择城市</option>';
$("#city").append(ss);
//获取省份名称
var pp = $(p).val();
//根据省份名称 遍历二维数组
for(var i = 0; i < lis[pp].length; i++) {
$("#city").append('<option value="' + lis[pp][i] + '">' + lis[pp][i] + '</option>');
}
}
function selectCity(c) {
//清空区域
$("#qu").empty();
//获取省份
var pp = $("#sheng").val();
//获取城市
var cc = $(c).val();
//根据城市和省份名称 遍历三维数组
for(var i = 0; i < lis[pp][cc].length; i++) {
$("#qu").append('<option value="' + lis[pp][cc][i] + '">' + lis[pp][cc][i] + '</option>');
}
}
</script>
</html>
jQuery-----三级联动
猜你喜欢
转载自blog.csdn.net/qq_41139281/article/details/80528576
今日推荐
周排行