二级联动

Posted jingcong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了二级联动相关的知识,希望对你有一定的参考价值。

  1 <!doctype html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>最好用的js二级联动-jq22.com</title>
  6     <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  7     <style>
  8 
  9     </style>
 10 </head>
 11 <body>
 12     <select name="sheng" id="to_cn" onchange="set_city(this, document.getElementById(‘city‘)); WYL();" class="login_text_input">
 13         <option value="0">请选择</option>
 14         <option value="台湾">台湾</option>
 15         <option value="马来西亚">马来西亚</option>
 16         <option value="北京">北京</option>
 17         <option value="上海">上海</option>
 18         <option value="天津">天津</option>
 19         <option value="重庆">重庆</option>
 20         <option value="河北省">河北省</option>
 21         <option value="山西省">山西省</option>
 22         <option value="辽宁省">辽宁省</option>
 23         <option value="吉林省">吉林省</option>
 24         <option value="黑龙江省">黑龙江省</option>
 25         <option value="江苏省">江苏省</option>
 26         <option value="浙江省">浙江省</option>
 27         <option value="安徽省">安徽省</option>
 28         <option value="福建省">福建省</option>
 29         <option value="江西省">江西省</option>
 30         <option value="山东省">山东省</option>
 31         <option value="河南省">河南省</option>
 32         <option value="湖北省">湖北省</option>
 33         <option value="湖南省">湖南省</option>
 34         <option value="广东省">广东省</option>
 35         <option value="海南省">海南省</option>
 36         <option value="四川省">四川省</option>
 37         <option value="贵州省">贵州省</option>
 38         <option value="云南省">云南省</option>
 39         <option value="陕西省">陕西省</option>
 40         <option value="甘肃省">甘肃省</option>
 41         <option value="青海省">青海省</option>
 42         <option value="内蒙古">内蒙古</option>
 43         <option value="广西">广西</option>
 44         <option value="西藏">西藏</option>
 45         <option value="宁夏">宁夏</option>
 46         <option value="新疆">新疆</option>
 47         <option value="香港">香港</option>
 48         <option value="澳门">澳门</option>
 49     </select> - 市
 50     <select id="city" class="login_text_input" name="shi">
 51         <option value="0">请选择</option>
 52     </select>
 53     <script>
 54         cities = new Object();
 55 
 56         cities[台湾] = new Array(台北, 台南, 其他);
 57 
 58         cities[马来西亚] = new Array(Malaysia);
 59 
 60         cities[北京] = new Array(北京);
 61 
 62         cities[上海] = new Array(上海);
 63 
 64         cities[天津] = new Array(天津);
 65 
 66         cities[重庆] = new Array(重庆);
 67 
 68         cities[河北省] = new Array(石家庄, 张家口, 承德, 秦皇岛, 唐山, 廊坊, 保定, 沧州, 衡水, 邢台, 邯郸);
 69 
 70         cities[山西省] = new Array(太原, 大同, 朔州, 阳泉, 长治, 晋城, 忻州, 吕梁, 晋中, 临汾, 运城);
 71 
 72         cities[辽宁省] = new Array(沈阳, 朝阳, 阜新, 铁岭, 抚顺, 本溪, 辽阳, 鞍山, 丹东, 大连, 营口, 盘锦, 锦州, 葫芦岛);
 73 
 74         cities[吉林省] = new Array(长春, 白城, 松原, 吉林, 四平, 辽源, 通化, 白山, 延边);
 75 
 76         cities[黑龙江省] = new Array(哈尔滨, 齐齐哈尔, 黑河, 大庆, 伊春, 鹤岗, 佳木斯, 双鸭山, 七台河, 鸡西, 牡丹江, 绥化, 大兴安);
 77 
 78         cities[江苏省] = new Array(南京, 徐州, 连云港, 宿迁, 淮阴, 盐城, 扬州, 泰州, 南通, 镇江, 常州, 无锡, 苏州);
 79 
 80         cities[浙江省] = new Array(杭州, 湖州, 嘉兴, 舟山, 宁波, 绍兴, 金华, 台州, 温州, 丽水);
 81 
 82         cities[安徽省] = new Array(合肥, 宿州, 淮北, 阜阳, 蚌埠, 淮南, 滁州, 马鞍山, 芜湖, 铜陵, 安庆, 黄山, 六安, 巢湖, 池州, 宣城);
 83 
 84         cities[福建省] = new Array(福州, 南平, 三明, 莆田, 泉州, 厦门, 漳州, 龙岩, 宁德);
 85 
 86         cities[江西省] = new Array(南昌, 九江, 景德镇, 鹰潭, 新余, 萍乡, 赣州, 上饶, 抚州, 宜春, 吉安);
 87 
 88         cities[山东省] = new Array(济南, 聊城, 德州, 东营, 淄博, 潍坊, 烟台, 威海, 青岛, 日照, 临沂, 枣庄, 济宁, 泰安, 莱芜, 滨州, 菏泽);
 89 
 90         cities[河南省] = new Array(郑州, 三门峡, 洛阳, 焦作, 新乡, 鹤壁, 安阳, 濮阳, 开封, 商丘, 许昌, 漯河, 平顶山, 南阳, 信阳, 周口, 驻马店);
 91 
 92         cities[湖北省] = new Array(武汉, 十堰, 襄攀, 荆门, 孝感, 黄冈, 鄂州, 黄石, 咸宁, 荆州, 宜昌, 恩施, 襄樊);
 93 
 94         cities[湖南省] = new Array(长沙, 张家界, 常德, 益阳, 岳阳, 株洲, 湘潭, 衡阳, 郴州, 永州, 邵阳, 怀化, 娄底, 湘西);
 95 
 96         cities[广东省] = new Array(广州, 清远, 韶关, 河源, 梅州, 潮州, 汕头, 揭阳, 汕尾, 惠州, 东莞, 深圳, 珠海, 江门, 佛山, 肇庆, 云浮, 阳江, 茂名, 湛江);
 97 
 98         cities[海南省] = new Array(海口, 三亚);
 99 
100         cities[四川省] = new Array(成都, 广元, 绵阳, 德阳, 南充, 广安, 遂宁, 内江, 乐山, 自贡, 泸州, 宜宾, 攀枝花, 巴中, 达川, 资阳, 眉山, 雅安, 阿坝, 甘孜, 凉山);
101 
102         cities[贵州省] = new Array(贵阳, 六盘水, 遵义, 毕节, 铜仁, 安顺, 黔东南, 黔南, 黔西南);
103 
104         cities[云南省] = new Array(昆明, 曲靖, 玉溪, 丽江, 昭通, 思茅, 临沧, 保山, 德宏, 怒江, 迪庆, 大理, 楚雄, 红河, 文山, 西双版纳);
105 
106         cities[陕西省] = new Array(西安, 延安, 铜川, 渭南, 咸阳, 宝鸡, 汉中, 榆林, 商洛, 安康);
107 
108         cities[甘肃省] = new Array(兰州, 嘉峪关, 金昌, 白银, 天水, 酒泉, 张掖, 武威, 庆阳, 平凉, 定西, 陇南, 临夏, 甘南);
109 
110         cities[青海省] = new Array(西宁, 海东, 西宁, 海北, 海南, 黄南, 果洛, 玉树, 海西);
111 
112         cities[内蒙古] = new Array(呼和浩特, 包头, 乌海, 赤峰, 呼伦贝尔盟, 兴安盟, 哲里木盟, 锡林郭勒盟, 乌兰察布盟, 鄂尔多斯, 巴彦淖尔盟, 阿拉善盟);
113 
114         cities[广西] = new Array(南宁, 桂林, 柳州, 梧州, 贵港, 玉林, 钦州, 北海, 防城港, 南宁, 百色, 河池, 柳州, 贺州);
115 
116         cities[西藏] = new Array(拉萨, 那曲, 昌都, 林芝, 山南, 日喀则, 阿里);
117 
118         cities[宁夏] = new Array(银川, 石嘴山, 吴忠, 固原);
119 
120         cities[新疆] = new Array(乌鲁木齐, 克拉玛依, 喀什, 阿克苏, 和田, 吐鲁番, 哈密, 博尔塔拉, 昌吉, 巴音郭楞, 伊犁, 塔城, 阿勒泰);
121 
122         cities[香港] = new Array(香港);
123 
124         cities[澳门] = new Array(澳门);
125 
126         function set_city(province, city) {
127 
128             var pv, cv;
129 
130             var i, ii;
131 
132             pv = province.value;
133 
134             cv = city.value;
135 
136             city.length = 1;
137 
138             if (pv == 0) return;
139 
140             if (typeof (cities[pv]) == undefined) return;
141 
142             for (i = 0; i < cities[pv].length; i++) {
143 
144                 ii = i + 1;
145 
146                 city.options[ii] = new Option();
147 
148                 city.options[ii].text = cities[pv][i];
149 
150                 city.options[ii].value = cities[pv][i];
151 
152             }
153 
154         }
155     </script>
156 </body>
157 </html>

 

以上是关于二级联动的主要内容,如果未能解决你的问题,请参考以下文章

JS中的二级联动的注意事项

phpcms联动菜单有啥用

省市二级联动

Mybatis + js 实现下拉列表二级联动

二级联动

二级联动非ajax实现