js 二级联动菜单

最新推荐文章于 2024-04-01 13:53:49 发布

sunlizhen

最新推荐文章于 2024-04-01 13:53:49 发布

阅读量326

点赞数

分类专栏： JS类文章标签：二级联动菜单 js

本文链接：https://blog.csdn.net/sunlizhen/article/details/77341064

版权

JS类专栏收录该内容

202 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级联动</title>
</head>
<body>
<form name="myform">
<select name="province"></select>
<select name="city"></select>
</form>
</body>
<script>
var arr_province = ["请选择省/城市", "北京市", "上海市", "天津市", "重庆市", "深圳市", "广东省"];
var arr_city = [
["请选择城市/地区"],
["东城区", "西城区", "朝阳区", "宣武区", "昌平区", "大兴区", "丰台区", "海淀区"],
['宝山区', '长宁区', '丰贤区', '虹口区', '黄浦区', '青浦区', '南汇区', '徐汇区', '卢湾区'],
['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],
['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],
['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],
['广州市', '惠州市', '汕头市', '珠海市', '佛山市', '中山市', '东莞市']
];

// 获取第一个select框；
var province = document.myform.province;
// 获取第二个select框；
var city = document.myform.city;
// 将数组arr_province 的内容赋值给第一个下拉菜单；
function init(){
// 循环数组arr_province 里边的所有内容；
for(var i = 0;i<arr_province.length;i++){
// 给第一个select赋值高度，才能在里边写内容
province.length = arr_province.length;
province[i].innerHTML = arr_province[i];
province[i].value = arr_province[i];
}
// 设置默认被选中的选项；因为第一个框默认是索引为0的值；
var index = 0;
province.selectedIndex = index;
//给city赋值高度，才能在其里面写入内容
city.length=arr_city[index].length;
select_change(city,arr_city,index);
}
init();

province.onchange = function(){
select_change(city,arr_city,this.selectedIndex);
}
function select_change(obj,arr,num){
// 先给第二个select赋值高度，这样才能在里面写内容；
obj.length = arr[num].length;
for(var i = 0;i<arr[num].length;i++){
obj[i].value = arr[num][i];
obj[i].innerHTML = arr[num][i];
}
}

</script>
</html>