码迷,mamicode.com
首页 > Web开发 > 详细

jQuery + jQuery Mobile 实现省市二级下拉列表页面

时间:2014-05-31 00:02:35      阅读:471      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

一、需求:

提供省、市下拉列表,当用户选择省一级下拉列表项后,市下拉列表的各个选项自动变为该省对应的城市列表。

 

二、效果:
bubuko.com,布布扣


bubuko.com,布布扣
 

三、实现:

1.省市json数据,来自:

http://www.cnblogs.com/jinzhao/archive/2012/04/01/2428142.html

Js代码  bubuko.com,布布扣
  1. /** 
  2.  * 省市json数据 
  3.  */  
  4. var provinceAndCityArray = [{ name: "北京", cities: ["西城""东城""崇文""宣武""朝阳""海淀""丰台""石景山""门头沟""房山""通州""顺义""大兴""昌平""平谷""怀柔""密云""延庆"] },  
  5.                        { name: "天津", cities: ["青羊""河东""河西""南开""河北""红桥""塘沽""汉沽""大港""东丽""西青""北辰""津南""武清""宝坻""静海""宁河""蓟县""开发区"] },  
  6.                        { name: "河北", cities: ["石家庄""秦皇岛""廊坊""保定""邯郸""唐山""邢台""衡水""张家口""承德""沧州""衡水"] },  
  7.                        { name: "山西", cities: ["太原""大同""长治""晋中""阳泉""朔州""运城""临汾"] },  
  8.                        { name: "内蒙古", cities: ["呼和浩特""赤峰""通辽""锡林郭勒""兴安"] },  
  9.                        { name: "辽宁", cities: ["大连""沈阳""鞍山""抚顺""营口""锦州""丹东""朝阳""辽阳""阜新""铁岭""盘锦""本溪""葫芦岛"] },  
  10.                        { name: "吉林", cities: ["长春""吉林""四平""辽源""通化""延吉""白城""辽源""松原""临江""珲春"] },  
  11.                        { name: "黑龙江", cities: ["哈尔滨""齐齐哈尔""大庆""牡丹江""鹤岗""佳木斯""绥化"] },  
  12.                        { name: "上海", cities: ["浦东""杨浦""徐汇""静安""卢湾""黄浦""普陀""闸北""虹口""长宁""宝山""闵行""嘉定""金山""松江""青浦""崇明""奉贤""南汇"] },  
  13.                        { name: "江苏", cities: ["南京""苏州""无锡""常州""扬州""徐州""南通""镇江""泰州""淮安""连云港""宿迁""盐城""淮阴""沐阳""张家港"] },  
  14.                        { name: "浙江", cities: ["杭州""金华""宁波""温州""嘉兴""绍兴""丽水""湖州""台州""舟山""衢州"] },  
  15.                        { name: "安徽", cities: ["合肥""马鞍山""蚌埠""黄山""芜湖""淮南""铜陵""阜阳""宣城""安庆"] },  
  16.                        { name: "福建", cities: ["福州""厦门""泉州""漳州""南平""龙岩""莆田""三明""宁德"] },  
  17.                        { name: "江西", cities: ["南昌""景德镇""上饶""萍乡""九江""吉安""宜春""鹰潭""新余""赣州"] },  
  18.                        { name: "山东", cities: ["青岛""济南""淄博""烟台""泰安""临沂""日照""德州""威海""东营""荷泽""济宁""潍坊""枣庄""聊城"] },  
  19.                        { name: "河南", cities: ["郑州""洛阳""开封""平顶山""濮阳""安阳""许昌""南阳""信阳""周口""新乡""焦作""三门峡""商丘"] },  
  20.                        { name: "湖北", cities: ["武汉""襄樊""孝感""十堰""荆州""黄石""宜昌""黄冈""恩施""鄂州""江汉""随枣""荆沙""咸宁"] },  
  21.                        { name: "湖南", cities: ["长沙""湘潭""岳阳""株洲""怀化""永州""益阳""张家界""常德""衡阳""湘西""邵阳""娄底""郴州"] },  
  22.                        { name: "广东", cities: ["广州""深圳""东莞""佛山""珠海""汕头""韶关""江门""梅州""揭阳""中山""河源""惠州""茂名""湛江""阳江""潮州""云浮""汕尾""潮阳""肇庆""顺德""清远"] },  
  23.                        { name: "广西", cities: ["南宁""桂林""柳州""梧州""来宾""贵港""玉林""贺州"] },  
  24.                        { name: "海南", cities: ["海口""三亚"] },  
  25.                        { name: "重庆", cities: ["渝中""大渡口""江北""沙坪坝""九龙坡""南岸""北碚""万盛""双桥""渝北""巴南""万州""涪陵""黔江""长寿"] },  
  26.                        { name: "四川", cities: ["成都""达州""南充""乐山""绵阳""德阳""内江""遂宁""宜宾""巴中""自贡""康定""攀枝花"] },  
  27.                        { name: "贵州", cities: ["贵阳""遵义""安顺""黔西南""都匀"] },  
  28.                        { name: "云南", cities: ["昆明""丽江""昭通""玉溪""临沧""文山""红河""楚雄""大理"] },  
  29.                        { name: "西藏", cities: ["拉萨""林芝""日喀则""昌都"] },  
  30.                        { name: "陕西", cities: ["西安""咸阳""延安""汉中""榆林""商南""略阳""宜君""麟游""白河"] },  
  31.                        { name: "甘肃", cities: ["兰州""金昌""天水""武威""张掖""平凉""酒泉"] },  
  32.                        { name: "青海", cities: ["黄南""海南""西宁""海东""海西""海北""果洛""玉树"] },  
  33.                        { name: "宁夏", cities: ["银川""吴忠"] },  
  34.                        { name: "新疆", cities: ["乌鲁木齐""哈密""喀什""巴音郭楞""昌吉""伊犁""阿勒泰""克拉玛依""博尔塔拉"] },  
  35.                        { name: "香港", cities: ["中西区""湾仔区""东区""南区""九龙-油尖旺区""九龙-深水埗区""九龙-九龙城区""九龙-黄大仙区""九龙-观塘区""新界-北区""新界-大埔区""新界-沙田区""新界-西贡区""新界-荃湾区""新界-屯门区""新界-元朗区""新界-葵青区""新界-离岛区"] },  
  36.                        { name: "澳门", cities: ["花地玛堂区""圣安多尼堂区""大堂区""望德堂区""风顺堂区""嘉模堂区""圣方济各堂区""路氹城"]}];  

 

2.html页面,主要就是放置了两个select,使用了jQuery Mobile:

Html代码  bubuko.com,布布扣
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <meta name="viewport" content="width=device-width, initial-scale=1">  
  6. <link rel="stylesheet"  
  7.     href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />  
  8. <title>meetwe</title>  
  9. </head>  
  10. <body>  
  11.     <table width="100%" cellpadding="10">  
  12.         <tr>  
  13.             <td align="center">请选择省份</td>  
  14.             <td align="left"><select id="selectProvince">  
  15.                     <option value="-1">请选择省份</option>  
  16.             </select></td>  
  17.         </tr>  
  18.         <tr>  
  19.             <td align="center">请选择城市</td>  
  20.             <td align="left"><select id="selectCity">  
  21.                     <option value="-1">请选择城市</option>  
  22.             </select></td>  
  23.         </tr>  
  24.     </table>  
  25.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  26.     <script  src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>  
  27.   
  28.         <script src="../js/province-and-city-json.js"></script>  
  29.         <script src="../js/create-province-and-city.js"></script>  
  30. </body>  
  31. </html>  

 

3.js代码实现填充下拉列表选项,并响应省一级下拉列表选中项改变事件更改市级下拉列表取值:

Js代码  bubuko.com,布布扣
  1. $(document).on("pageinit"function() {  
  2.     // 填充省下拉列表  
  3.     var provincesOptionHtml = "";  
  4.     var provinces = [];  
  5.     for(var el in provinceAndCityArray) {  
  6.         provinces.push(provinceAndCityArray[el].name);  
  7.         provincesOptionHtml += "<option value=" + el + ">" + provinceAndCityArray[el].name + "</option>";  
  8.     }  
  9.     $("#selectProvince").append(provincesOptionHtml);  
  10.       
  11.     // 填充城市下拉列表  
  12.     $("#selectProvince").bind("change"function() {  
  13.         var selectedProvince = $("#selectProvince :selected").val();  
  14.         if(selectedProvince != -1) {  
  15.             var citiesOptionHtml = "";  
  16.             var cities = [];  
  17.             cities = provinceAndCityArray[selectedProvince].cities;  
  18.             for(var elCity in cities) {  
  19.                 citiesOptionHtml += "<option value=" + elCity + ">" + cities[elCity] + "</option>";  
  20.             }  
  21.             // 清空之前的城市列表  
  22.             $("#selectCity option[value!=-1]").remove();  
  23.             $("#selectCity option[value=-1]").attr("selected"true);  
  24.             $("#selectCity").append(citiesOptionHtml);  
  25.             $("#selectCity").selectmenu("refresh");  
  26.         }  
  27.     });  
  28. });  

 
 

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!