生活随笔
收集整理的这篇文章主要介绍了
用JavaScript实现动态省市县三级联动
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
像平时购物选择地址时一样，通过选择的省动态加载城市列表，通过选择的城市动态加载县区列表，从而可以实现省市县的三级联动，下面使用原生的JavaScript来实现这个功能：
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>三级联动测试</title><script src="jquery-2.1.4.min.js"></script><script type="text/javascript">//用来获得option元素中selected属性为true的元素的idfunction Get_Selected_Id(place){var pro = document.getElementById(place);var Selected_Id = pro.options[pro.selectedIndex].id;return Selected_Id; //返回selected属性为true的元素的id}//改变下一个级联的option元素的内容，即加载市或县function Get_Next_Place(This_Place_ID,Action){var Selected_Id = Get_Selected_Id(This_Place_ID); //Selected_Id用来记录当前被选中的省或市的IDif(Action=='Get_city') //从而可以在下一个级联中加载相应的市或县Add_city(Selected_Id);else if(Action=='Get_country')Add_country(Selected_Id);}//用来存储省市区的数据结构var Place_dict = {"GuangDong":{"GuangZhou":["PanYu","HuangPu","TianHe"],"QingYuan":["QingCheng","YingDe","LianShan"],"FoShan":["NanHai","ShunDe","SanShui"]},"ShanDong":{"JiNan":["LiXia","ShiZhong","TianQiao"],"QingDao":["ShiNan","HuangDao","JiaoZhou"]},"HuNan":{"ChangSha":["KaiFu","YuHua","WangCheng"],"ChenZhou":["BeiHu","SuXian","YongXian"]}};//加载城市选项function Add_city(Province_Selected_Id){$("#city").empty();$("#city").append("<option>City</option>");$("#country").empty();$("#country").append("<option>Country</option>");//上面的两次清空与两次添加是为了保持级联的一致性var province_dict = Place_dict[Province_Selected_Id]; //获得一个省的字典for(city in province_dict){ //取得省的字典中的城市//添加内容的同时在option标签中添加对应的城市IDvar text = "<option"+" id='"+city+"'>"+city+"</option>";$("#city").append(text);console.log(text); //用来观察生成的text数据}}//加载县区选项function Add_country(City_Selected_Id){$("#country").empty();$("#country").append("<option>Country</option>");//上面的清空与添加是为了保持级联的一致性var Province_Selected_ID = Get_Selected_Id("province"); //获得被选中省的ID，从而方便在字典中加载数据var country_list = Place_dict[Province_Selected_ID][City_Selected_Id]; //获得城市列表for(index in country_list){添加内容的同时在option标签中添加对应的县区IDvar text = "<option"+" id=\'"+country_list[index]+"\'>"+country_list[index]+"</option>";$("#country").append(text);console.log(text); //用来观察生成的text数据}}</script>
</head>
<body><p>您的收货地址：</p><select id="province" οnchange="Get_Next_Place('province','Get_city')"><option id="Not_data1">Province</option><option id="GuangDong" value="GuangDong">GuangDong</option><option id="ShanDong" value="ShanDong">ShanDong</option><option id="HuNan" value="HuNan">HuNan</option></select><select id="city" οnchange="Get_Next_Place('city','Get_country')"><option id="Not_data2">City</option></select><select id="country"><option id="Not_data3">Country</option></select><br/>
</body>
</html>
测试结果如下：
未做任何选择时：
选择时：
当然，省市县三者都是动态联动的，只要顶级的内容发生改变，所有子级的内容也会发生改变或被重置为City或Country.
总结
以上是生活随笔为你收集整理的用JavaScript实现动态省市县三级联动的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
