通过三个下拉菜单的联动来实现,第一级下拉菜单为省级,第二级下拉菜单为市级,第三级下拉菜单为区级。当点击第一级下拉菜单,第二级菜单的内容会自动匹配;选择第二级菜单时,第三级菜单会自动生成。当我取消上一级菜单的选项时,次一级选项会自动消失。 |
原理
基本用的for循环
在创建arr的时候分组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="sheng">
<option>省</option>
</select>
<select id="shi">
<option>市</option>
</select>
<select id="qu">
<option>区</option>
</select>
<script>
var sheng = document.getElementById("sheng")
var shi = document.getElementById("shi")
var qu = document.getElementById("qu")
var arrsheng = ["大江苏", "大台湾", "小日本"]
var arrshi = [["南京", "徐州", "南通"], [
"台湾一市", "台湾二市"
], ["日本小岛", "日本小小岛"]
]
var arrqu = [[['南京的一个区', '南京的二个区'], ['徐州的一个区', '徐州的二个区'], ['南通的一个区', '南通的二个区']], [['台湾一市的一区', '台湾一市的二区'], ['台湾一市的一区', '台湾二市的二区'], ['日本小岛的屎盆子', '日本小岛的狗'], ['日本小小岛的鸟蛋', '日本小小岛的贱人']]
]
var index = -1
for (var i = 0; i < arrsheng.length; i++) {
sheng.options.add(new Option(arrsheng[i]));
}
sheng.onchange = function getShi() {
shi.options.length = 1;
qu.options.length = 1;
index = this.selectedIndex - 1;
if (index > -1) {
for (var i = 0; i < arrshi[index].length; i++) {
shi.options.add(new Option(arrshi[index][i]));
}
}
}
shi.onchange = function getQu() {
qu.options.length = 1;
var index2 = this.selectedIndex - 1;
if(index2 > -1) {
for(var i = 0; i < arrqu[index][index2].length; i++) {
qu.options.add(new Option(arrqu[index][index2][i]));
}
}
}
</script>
</body>
</html>
省市区三级联动