HTML:
<select id="inne">
<option value="">请选择省</option>
</select>
<select id="int">
<option value="">请选择市</option>
</select>
<select id="inpu">
<option value="">请选择县</option>
</select>
JS:
<script>
let data = [{
id: 1,
name: "河南",
childer: [{
name: "开封",
childer: [
"开封1",
"开封2",
"开封3",
"开封4"
]
},
{
name: "新乡",
childer: [
"新乡1",
"新乡2",
"新乡3",
"新乡4",
]
}
]
},
{
id: 2,
name: "河北",
childer: [{
name: "石家庄",
childer: [
"石家庄1",
"石家庄2",
"石家庄3",
"石家庄4",
]
},
{
name: "衡水",
childer: [
"衡水1",
"衡水2",
"衡水3",
"衡水4",
]
}
]
}, {
id: 2,
name: "辽宁",
childer: [{
name: "葫芦岛",
childer: [
"葫芦岛1",
"葫芦岛2",
"葫芦岛3",
"葫芦岛4",
]
},
{
name: "锦州",
childer: [
"锦州1",
"锦州2",
"锦州3",
"锦州4",
]
}
]
}
]
//获取每个标签
let inne = document.getElementById('inne');
let int = document.getElementById('int');
let inpu = document.getElementById('inpu');
//循环假数据data'
for (let i = 0; i < data.length; i++) {
//拼接option
inne.innerHTML += '<option value="' + i + '">' + data[i].name + '</option>';
}
inne.onclick = function() {
let tp = this.value;
int.innerHTML = '<option value="">请选择市</option>';
for (let i = 0; i < data[tp].childer.length; i++) {
int.innerHTML += '<option value="' + i + '">' + data[tp].childer[i].name + '</option>';
}
int.onclick = function() {
let ts = this.value;
inpu.innerHTML = '<option value="">请选择县</option>';
for (let i = 0; i < data[tp].childer[ts].childer.length; i++) {
inpu.innerHTML += '<option value="">' + data[tp].childer[ts].childer[i] + '</option>';
}
}
}
</script>
里面的数据大家可以到时候修改一下用了,祝大家学习愉快