本文主要分享了js实现省市区三级联动菜单效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
效果如下：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>省市区三级联动</title>
</head>
<body>
<form>
<select id="province">
<option>请选择省份</option>
</select>
<select id="city">
<option>请选择城市</option>
</select>
<select id="district">
<option>请选择区域</option>
</select>
</form>
<script src="json.js"></script>
<script type="text/javascript">
var prodata = [],
citydata = [],
distdata = [];
var proselect = document.getelementbyid("province"),
cityselect = document.getelementbyid("city"),
districtselect = document.getelementbyid("district");
var curpro = "",
curcity = "";
// 封装更新选择列表函数
function fillselect(select,list){
for (var i = select.length-1; i > 0 ; i--){
select.remove(i);
}
list.foreach(function(data){
var option = new option(data.name, data.sheng);
option.dataset.di = data.di;
select.add(option);
})
}
// 将数据按省、市、地区分别存储
datajson.foreach(function(data){
if (data.level === 1){
prodata.push(data);
}
if (data.level === 2){
citydata.push(data);
}
if (data.level === 3){
distdata.push(data);
}
})
fillselect(proselect,prodata);
// 监听一级省份选择列表change事件，更新二级城市列表
proselect.addeventlistener("change",function(event){
var val = event.target.value;
var list = [];
citydata.foreach(function(d){
if (d.sheng === val) {
list.push(d);
}
})
fillselect(cityselect,list);
})
// 监听二级城市选择列表change事件，更新三级区域列表
cityselect.addeventlistener("change",function(event){
var val = event.target.value;
var curindex = event.target.selectedindex;
curcity = event.target[curindex].dataset.di;
console.log(event.target,curcity);
var list = [];
distdata.foreach(function(d){
if (d.di === curcity && d.sheng === val) {
list.push(d);
}
})
fillselect(districtselect,list);
})
</script>
</body>
</html>
更多js 实现省市区三级联动菜单效果。
相关文章：
用php实现城市地区三级联动 附带数据库
实现ajax三级联动下拉菜单的实例代码
yii2实现中国省市区三级联动实例