<body>
<select name="" id="">
<option value="null">====请选择市====</option>
<!-- <option value="四川">四川</option>
<option value="贵州">贵州</option> -->
</select>
<select name="" id="">
<option value="null">====请选择区====</option>
</select>
<select name="" id="">
<option value="null">====请选择县====</option>
</select>
<script src="./js/data.js"></script>
<script>
let allselects = document.querySelectorAll("select");
// 一级菜单栏
data.forEach((ele) => {
allselects[0].innerHTML += `<option value="${ele.name}">${ele.name}</option>`;
});
// 二级菜单栏
allselects[0].onchange = function () {
data.forEach((ele) => {
if (ele.name == this.value) {
allselects[1].innerHTML = ` <option value="null">====请选择区====</option>`;
// 向第二个选择框添加option
ele.next.forEach((a) => {
allselects[1].innerHTML += `<option value="${a.name}">${a.name}</option>`;
});
}
});
};
// 三级菜单层
allselects[1].onchange = function () {
console.log(this.value);
data.forEach((ele) => {
ele.next.forEach((a) => {
if (a.name == this.value) {
allselects[2].innerHTML = ` <option value="null">====请选择县====</option>`;
a.next.forEach((a) => {
allselects[2].innerHTML += `<option value="${a}">${a}</option>`;
});
}
});
});
};
</script>
</body>
2973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
