jQuery三级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery3.min.js"></script>
</head>
<body>
<select id="pro">
<option>——请选择省份——</option>
</select>
<select id="city">
<option>——请选择城市——</option>
</select>
<select id="district">
<option>——请选择区县——</option>
</select>
</body>
<script>
var provience = [{"ID": 1,"NAME": "海南省"},{"ID": 2,"NAME": "山西省"},{"ID": 3,"NAME": "湖北省"}];
var city = [{"ID": 11,"NAME": "海口市", "PARENT_ID": 1},{"ID": 12,"NAME": "三亚市", "PARENT_ID": 1},{"ID": 13,"NAME": "三沙市","PARENT_ID": 1},{"ID": 14,"NAME": "儋州市","PARENT_ID": 1},{"ID": 15,"NAME": "五指山市","PARENT_ID": 1},{"ID": 16,"NAME": "琼海市","PARENT_ID": 1},{"ID": 21,"NAME": "太原市","PARENT_ID": 2},{"ID": 22,"NAME": "大同市","PARENT_ID": 2},{"ID": 23,"NAME": "阳泉市","PARENT_ID": 2},{"ID": 24,"NAME": "长治市","PARENT_ID": 2},{"ID": 25,"NAME": "晋城市","PARENT_ID": 2},{"ID": 26,"NAME": "朔州市","PARENT_ID": 2},{"ID": 31,"NAME": "武汉市","PARENT_ID": 3},{"ID": 32,"NAME": "黄冈市","PARENT_ID": 3},{"ID": 33,"NAME": "黄石市","PARENT_ID": 3},{"ID": 34,"NAME": "宜昌市","PARENT_ID": 3},{"ID": 35,"NAME": "襄阳市","PARENT_ID": 3},{"ID": 36,"NAME": "鄂州市","PARENT_ID": 3},{"ID": 37,"NAME": "荆门市","PARENT_ID": 3}];
var district = [{ "ID": 111, "NAME": "秀英区", "PARENT_ID": 11},
{ "ID": 112, "NAME": "龙华区", "PARENT_ID": 11},
{ "ID": 113, "NAME": "琼山区", "PARENT_ID": 11},
{ "ID": 114, "NAME": "美兰区", "PARENT_ID": 11},
{ "ID": 121, "NAME": "河西区", "PARENT_ID": 12},
{ "ID": 122, "NAME": "河东区", "PARENT_ID": 12},
{ "ID": 131, "NAME": "西沙群岛", "PARENT_ID": 13},
{ "ID": 132, "NAME": "中沙群岛", "PARENT_ID": 13},
{ "ID": 133, "NAME": "南沙群岛", "PARENT_ID": 13},
{ "ID": 141, "NAME": "那大镇", "PARENT_ID": 14},
{ "ID": 142, "NAME": "和庆镇", "PARENT_ID": 14},
{ "ID": 143, "NAME": "南丰镇", "PARENT_ID": 14},
{ "ID": 144, "NAME": "大成镇", "PARENT_ID": 14},
{ "ID": 151, "NAME": "五指山1", "PARENT_ID": 15},
{ "ID": 152, "NAME": "五指山2", "PARENT_ID": 15},
{ "ID": 153, "NAME": "五指山3", "PARENT_ID": 15},
{ "ID": 154, "NAME": "琼海市1", "PARENT_ID": 16},
{ "ID": 155, "NAME": "琼海市2", "PARENT_ID": 16},
{ "ID": 156, "NAME": "琼海市3", "PARENT_ID": 16},
{ "ID": 157, "NAME": "太原市1", "PARENT_ID": 21},
{ "ID": 158, "NAME": "太原市2", "PARENT_ID": 21},
{ "ID": 159, "NAME": "太原市3", "PARENT_ID": 21},
{ "ID": 160, "NAME": "大同市1", "PARENT_ID": 22},
{ "ID": 159, "NAME": "大同市2", "PARENT_ID": 22},
{ "ID": 160, "NAME": "大同市3", "PARENT_ID": 22},
{ "ID": 161, "NAME": "阳泉市1", "PARENT_ID": 23},
{ "ID": 162, "NAME": "阳泉市2", "PARENT_ID": 23},
{ "ID": 163, "NAME": "阳泉市3", "PARENT_ID": 23},
{ "ID": 164, "NAME": "长治市1", "PARENT_ID": 24},
{ "ID": 165, "NAME": "长治市2", "PARENT_ID": 24},
{ "ID": 166, "NAME": "长治市3", "PARENT_ID": 24},
{ "ID": 167, "NAME": "晋城市1", "PARENT_ID": 25},
{ "ID": 168, "NAME": "晋城市2", "PARENT_ID": 25},
{ "ID": 169, "NAME": "晋城市3", "PARENT_ID": 25},
{ "ID": 171, "NAME": "朔州市1", "PARENT_ID": 26},
{ "ID": 172, "NAME": "朔州市2", "PARENT_ID": 26},
{ "ID": 173, "NAME": "朔州市3", "PARENT_ID": 26},
{ "ID": 174, "NAME": "武昌区", "PARENT_ID": 31},
{ "ID": 175, "NAME": "洪山区", "PARENT_ID": 31},
{ "ID": 176, "NAME": "蔡甸区", "PARENT_ID": 31},
{ "ID": 177, "NAME": "蕲春县", "PARENT_ID": 32},
{ "ID": 178, "NAME": "蕲春1", "PARENT_ID": 32},
{ "ID": 179, "NAME": "蕲春2", "PARENT_ID": 32},
{ "ID": 180, "NAME": "黄石市1", "PARENT_ID": 33},
{ "ID": 181, "NAME": "黄石市2", "PARENT_ID": 33},
{ "ID": 182, "NAME": "黄石市3", "PARENT_ID": 33},
{ "ID": 183, "NAME": "宜昌市1", "PARENT_ID": 34},
{ "ID": 184, "NAME": "宜昌市2", "PARENT_ID": 34},
{ "ID": 185, "NAME": "宜昌市3", "PARENT_ID": 34},
{ "ID": 186, "NAME": "樊城区", "PARENT_ID": 35},
{ "ID": 187, "NAME": "枣阳市", "PARENT_ID": 35},
{ "ID": 188, "NAME": "老河口", "PARENT_ID": 35},
{ "ID": 189, "NAME": "华容区", "PARENT_ID": 36},
{ "ID": 190, "NAME": "鄂城区", "PARENT_ID": 36},
{ "ID": 191, "NAME": "葛店开发区", "PARENT_ID": 36},
{ "ID": 191, "NAME": "荆门市1", "PARENT_ID": 37},
{ "ID": 191, "NAME": "荆门市2", "PARENT_ID": 37},
{ "ID": 191, "NAME": "荆门市3", "PARENT_ID": 37}] ;
console.log(city)
//省级赋值
$.each(provience,function(k,p){//k表示provience的下标，p代表对应下标的值
var option = "<option value="+p.ID+">"+p.NAME+"</option>"; //声明一个变量保存option标签，并动态添加值
$("#pro").append(option); //将保存的option标签添加到省级的下拉框
});
//省级选择
$("#pro").change(function(){
var selValue = $(this).val(); //保存省级的val值
$("#city option:gt(0)").remove(); //每次改变省份，清除大于0的option
$("#district option:gt(0)").remove();
$.each(city,function(k,p){
if(p.PARENT_ID == selValue){ //如果省级的val值与市级相对应则获取对应的val和城市名称
var option = "<option value="+p.ID+">"+p.NAME+"</option>";
$("#city").append(option);
}
})
})
//市级选择
$("#city").change(function () {
var selValue = $(this).val();
$("#district option:gt(0)").remove();
$.each(district, function (k, p) {
if(p.PARENT_ID == selValue){
var option = "<option value="+p.ID+">"+p.NAME+"</option>";
$("#district").append(option);
}
});
});
</script>
</html>
