城市联动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>城市聯動</title>
</head>
<body><select name="" id="province" οnchange="d(this);"><option value="-1">--請選擇省--</option></select><select name="" id="city" οnchange="e(this)"><option value="-1">--請選擇市--</option></select> <select name="" id="zhen"><option value="-1">--請選擇鎮--</option></select> <script>// onchange:發生改變的時候觸發事件//聲明省var pres = ["北京市", "天津市", "重慶市","河北省","廣東省","上海市"];//聲明省var citys =[['昌平區','海淀區','朝陽區'],['濱海區','武清縣','南開區'],['長壽區','江津區','合川區'],['廊坊','石家莊','保定'],['佛山','東莞','廣州'],['浦東','普陀區','虹橋']]; var zhens = [[ ["昌平1", "昌平2", "昌平3"],["海淀1", "海淀2", "海淀3"],["朝陽1", "朝陽2", "朝陽3"]],[ ["濱海1", "濱海2", "濱海3"],["武清1", "武清2", "武清3"],["南開1", "南開2", "南開3"]],[ ["長壽1", "長壽2", "長壽3"],["江津1", "江津2", "江津3"],["合川1", "合川2", "合川3"]],[ ["廊坊1", "廊坊2", "廊坊3"],["石家莊1", "石家莊2", "石家莊3"],["保定1", "保定2", "保定3"]],[ ["佛山1", "佛山2", "佛山3"],["東莞1", "東莞2", "東莞3"],["廣州1", "廣州2", "廣州3"]],[ ["浦東1", "浦東2", "浦東3"],["普陀1", "普陀2", "普陀3"],["虹橋1", "虹橋2", "虹橋3"]],]; //設置一個省的公共下標var sheng = -1;// 1.獲取對象var province = document.getElementById('province');var city = document.getElementById('city');var zhen = document.getElementById('zhen');// // 2.1 設置省份的值var value = this.value;for (var i = 0; i < pres.length; i++) {//聲明option.<option value="pres[i]">Pres[i]</option>var op = new Option(pres[i], i);// console.log(op);//添加
province.options.add(op);}function d(obj) {if (obj.value == -1) {city.options.length = 0;zhen.options.length = 0;}//獲取值var val = obj.value;sheng = obj.value;//獲取ctiryvar cs = citys[val];// console.log(cs);//獲取默認區var as = zhens[val][0];//先清空市city.options.length = 0;zhen.options.length = 0;for (var i = 0; i < cs.length; i++) {var op = new Option(cs[i], i);city.options.add(op);}for (var i = 0; i < as.length; i++) {var op = new Option(as[i], i);zhen.options.add(op);}}function e(obj) {var val = obj.selectedIndex;var as = zhens[sheng][val];zhen.options.length = 0;for (var i = 0; i < as.length; i++) {var op = new Option(as[i], i);zhen.options.add(op);}}</script>
</body>
</html>
?
轉載于:https://www.cnblogs.com/yuxiang-qiwa/p/8195742.html
總結
- 上一篇： beego07----web博客
- 下一篇： 关于js封装函数的一些东西