JS中的三级联动
程序员文章站
2022-05-01 23:17:44
...
<script>
var arr=[
[1,'陕西省',0],
[2,'四川省',0],
[3,'甘肃省',0],
[4,'山西省',0],
[5,'西安市',1],//最后的数字与对应的省份前数字相同
[6,'宝鸡市',1],
[7,'成都市',2],
[8,'西充市',2],
[9,'兰州市',3],
[10,'天水市',3],
[11,'高新区',5],//最后的数字与对应的城市前数字相同
[12,'雁塔区',5],
[13,'长安区',5],
[14,'秦都区',6]
]
var prove=null;
var city=null;
var county=null;//省，市，区的初始化
window.onload=function(){
// 获取页面中的元素
prove=document.getElementById('prove');
city=document.getElementById('city');
county=document.getElementById('county');
str='<option>--请选择省份--</option>';
// 页面在加载时获取所有的省份显示在下拉框中
for(var i=0;i<arr.length;i++){
// 判断数组中索引为2的位置 值为0 是指所有的省份
if(arr[i][2]==0){//在每行的数组元素中查找索引为2的位置 值为0的元素
str+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>';
}
}
// console.log(str);
prove.innerHTML=str;
// 选择省份 遍历城市
//选择省份 从而选择出与省份对应的城市
prove.onchange=function(){
str='<option>--请选择城市--</option>';//清除str之前累积的值
var indexValue=document.getElementById('prove').value;
//indexValue用来获取省份前所对应的数字
for(var i=0;i<arr.length;i++){
// 判断数组中索引为2的数字 和 省份下拉框的value一致;
if(arr[i][2]==indexValue){//在每行的数组元素中查找索引为2的位置 值为省份所对应数字的元素
str+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>';
}
}
city.innerHTML=str;
county.innerHTML='<option>--请选择区县--</option>';//当改变省份时，区县的文本框初始化
}
//选择城市 从而选择出与城市对应的区县
city.onchange=function(){
str='<option>--请选择区县--</option>';
var indexValue_01=document.getElementById('city').value;
for(var i=0;i<arr.length;i++){
if(arr[i][2]==indexValue_01){
str+='<option value="'+[i][0]+'">'+arr[i][1]+'</option>';
}
}
county.innerHTML=str;
}
}
</script>
</head>
<body>
<form>
省份：<select id="prove">
<option>--请选择省份--</option>
</select>
城市：<select id="city">
<option>--请选择城市--</option>
</select>
区/县<select id="county">
<option>--请选择区县--</option>
</select>
</form>
</body>