话不多说,直接上demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>三级联动</title>
</head>
<body>
<center>
<select id="sheng" style="width: 25%;">
<option value="">-请选择省-</option>
</select>
<select id="shi" style="width: 25%;">
<option value="">-请选择市-</option>
</select>
<select id="qu" style="width: 25%;">
<option value="">-请选择区-</option>
</select>
</center>
<script type="text/javascript">
//数据,自己定义就好,需要注意的是数据格式
let arr = [{
id: 1,
name: "河南",
childer: [{
name: "郑州",
childer: [
"二期",
"金水区",
"惠济区"
]
}, {
name: "新乡",
childer: [
"红旗区",
"牧野区",
"经开区",
"辉县市",
"延津县",
"卫滨区",
"凤泉区",
"卫辉市",
"长恒市",
"新乡县",
"获嘉县",
"原阳县",
"封丘县"
]
}]
}, {
id: 2,
name: "内蒙古",
childer: [{
name: "呼和浩特",
childer: [
"新城区",
"赛罕区",
"玉泉区",
"回民区",
"托克托县",
"清水河县",
"武川县",
"和林格尔县",
"土默特左旗"
]
},
{
name:"呼伦贝尔",
childer:[
"海拉尔区",
"扎赉诺尔区",
"满洲里市",
"扎兰屯市",
"牙克石市",
"根河市",
"额尔古纳市",
"阿荣旗",
"莫力达瓦达斡尔族自治旗",
"鄂伦春自治旗",
"鄂温克族自治旗",
'新巴尔虎左旗',
"新巴尔虎右旗",
"陈巴尔虎旗"
]
}]
}];
//获取到三个下拉框
let sheng = document.getElementById("sheng");
let shi = document.getElementById("shi");
let qu = document.getElementById("qu");
for (let i = 0; i < arr.length; i++) {
sheng.innerHTML += '<option value="' + i + '">' + arr[i].name + '</option>';
};
//省级下拉框的状态触发事件
sheng.onchange = function() {
var val = this.value;//获取到当前下拉框的值
if (val == '') {//如果当前值为空的话中止事件
return;
}
//当省级下拉框的值不为空时将市级下拉框的选项进行渲染
//根据省级下拉框的值可以知道当前选中的省为哪一个,进行渲染对应的市级内容
shi.innerHTML = '<option value="">-请选择市-</option>';
for (let i = 0; i < arr[val].childer.length; i++) {
// let shiarr = arr[val].childer[i].name;
shi.innerHTML += '<option value="' + i + '">' + arr[val].childer[i].name + '</option>';
}
//优化更改省时出现的bug
qu.innerHTML = '<option value="">-请选择区-</option>';
//市级下拉框的状态触发事件
shi.onchange = function() {
let vals = this.value;
if (vals == '') {
return;
}
qu.innerHTML = '<option value="">-请选择区-</option>';
for (let i = 0; i < arr[val].childer[vals].childer.length; i++) {
qu.innerHTML += '<option value="'+i+'">' + arr[val].childer[vals].childer[i] + '</option>';
}
}
}
</script>
</body>
</html>