jQuery + jQuery Mobile 實現省市二級下拉選單頁面

weixin_33831673發表於2014-06-03
jQuery

一、需求：

提供省、市下拉選單，當使用者選擇省一級下拉選單項後，市下拉選單的各個選項自動變為該省對應的城市列表。

 

二、效果：



 

三、實現：

1.省市json資料，來自：

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

Js程式碼  收藏程式碼
  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程式碼  收藏程式碼
  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程式碼  收藏程式碼
  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. });  

 
 

相關文章