zoukankan      html  css  js  c++  java

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

    一、需求：

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

    二、效果：



     

    三、实现：

    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. });  

     
     
  • 相关阅读:
    SWT的TableVierer的使用二(数据排序)
    SWT的TableVierer的使用一
    SWT的TreeVierer的使用
    SWT中一些细节的说明
    SWT中各种参数大全
    SWT的GridLayout一些参数解释
    SWT中的GridLayout（转）例子不错
    鼠标放到按钮上，实现的动画
    关于文字下方线消失的动画
    超出部分用省略号代替，鼠标放上去显示多余部分内容
  • 原文地址：https://www.cnblogs.com/ranzige/p/3761503.html
Copyright © 2011-2022 走看看