jsp+js省市区三级联动

最新推荐文章于 2024-09-06 13:23:10 发布

weixin_30730053

最新推荐文章于 2024-09-06 13:23:10 发布

阅读量246

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangsblog12345/p/11161276.html

博客展示了使用JavaScript实现省市镇三级联动选择的代码。通过定义省份、城市和乡镇数组，编写创建选项的函数，利用元素的onchange事件动态更新下级选项，实现了根据省份选择更新城市选项，根据城市选择更新乡镇选项的功能。

<select id="province">
<option value="-1">请选择</option>
</select>>
<select id="city"></select>>
<select id="town"></select>>
<script>
var provinceArr = [ '江苏', '浙江' ];
var cityArr=[['南京市','苏州市','常州市','无锡市','镇江市'],['杭州市','宁波市','温州市','绍兴市']];
var townArr=[[['玄武区','秦淮区','鼓楼区','建邺区','雨花台区','栖霞区','浦口区','六合区','江宁区','溧水区'],['吴中区','虎丘区','工业园区'],['金坛市','钟楼区','天宁区'],['梁溪区','滨湖区','惠山区','锡山区','江阴市'],['京口区','润州区','丹徒区']],
[['上城区','下城区','余杭区','拱墅区','西湖区','江干区'],['江东区','海曙区','鄞州区','江北区','镇海区','北仑区'],['鹿城区','龙湾区','瓯海区','永嘉县'],['越城区','柯桥区','上虞区','诸暨市','嵊州市','新昌县']]];
function createOption(obj,dara){
for(var i in dara){
var op=new Option(dara[i],i);
obj.options.add(op);
}
}
var province = document.getElementById("province")
createOption(province,provinceArr);

var city = document.getElementById("city")
province.onchange=function(){
city.options.length=0;
createOption(city,cityArr[province.value]);
}

var town = document.getElementById("town")
city.onchange=function(){
town.options.length=0;
createOption(town,townArr[province.value][city.value]);
}

</script>