【JavaScript】省市联动示例

来源：互联网发布：java语言图形界面编辑：程序博客网时间：2024/05/17 04:40
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>省市联动练习</title></head><body onload="load()"><select id="province" onchange="changeProvince(this)"></select>  <select id="city" onchange="changeCity(this)"></select>  <select id="zone"></select><script type="text/javascript">var pro = ["安徽省", "浙江省", "山东省", "陕西省", "广州省"];pro["安徽省"] = ["合肥市", "安庆市", "六安市", "黄山市"];pro["浙江省"] = ["杭州市", "宁波市", "温州市", "嘉兴市"];pro["山东省"] = ["济南市", "滨州市", "青岛市"];pro["陕西省"] = ["西安市", "铜川市", "汉中市", "延安市"];pro["广州省"] = ["珠海市", "汕头市", "佛山市", "湛江市", "清远市"];pro["合肥市"] = ["瑶海区", "蜀山区", "经开区", "庐阳区", "包河区"];pro["安庆市"] = ["迎江区", "大观区", "宜秀区"];pro["六安市"] = ["裕安区", "金安区"];pro["黄山市"] = ["休宁县", "屯溪区", "徽州区", "黄山区"];pro["杭州市"] = ["上城区", "下城区", "江干区", "西湖区", "富阳区"];pro["宁波市"] = ["海曙区", "江东区", "江北区", "北仑区", "镇海区"];pro["温州市"] = ["鹿城区", "龙湾区", "瓯海区", "洞头区"];pro["嘉兴市"] = ["南湖区", "秀洲区"];pro["济南市"] = ["历下区", "市中区", "天桥区", "长清区"];pro["滨州市"] = ["滨城区", "沾化区"];pro["青岛市"] = ["市南区", "市北区", "黄岛区", "崂山区", "城阳区"];pro["西安市"] = ["长安区", "高陵区", "未央区", "阎良区", "莲湖区"];pro["铜川市"] = ["王益区", "印台区", "耀州区"];pro["汉中市"] = ["汉台区"];pro["延安市"] = ["宝塔区"];pro["珠海市"] = ["香洲区", "斗门区", "金湾区"];pro["汕头市"] = ["龙湖区", "金平区", "濠江区", "朝阳区", "潮南区", "澄海区"];pro["佛山市"] = ["三水区", "禅城区", "南海区", "顺德区", "高明区"];pro["湛江市"] = ["赤坎区", "霞山区", "坡头区", "麻章区"];pro["清远市"] = ["清城区", "清新区"];function load() {addop("province", pro);addop("city", pro[pro[0]]);addop("zone", pro[pro[pro[0]][0]])}function addop(id, arr) {var elem = document.getElementById(id);elem.options.length = 0;for(var i = 0; i < arr.length; i++) {elem.append(new Option(arr[i], arr[i]));}}function changeProvince(obj) {addop("city", pro[obj.value]);addop("zone", pro[pro[obj.value][0]]);}function changeCity(obj) {addop("zone", pro[obj.value]);}</script></body></html>
阅读全文
0 0