你的位置:首页 > Java教程

[Java教程]省市选择(基于zepto.js)


效果如下:

1           <div class="clList overflow-h mt75">2           <select class="pull-left cl-35 select01" id="cityParent">3             <option>请选择省</option>4           </select>5           <select class="pull-left cl-35 select02" id="city">6             <option>请选择市</option>7           </select>8         </div>

 1 //测试数据 2 var _json = [ { 3       "areas" : [ { 4         "name" : "东城区" 5       }, { 6         "name" : "西城区" 7       }, { 8         "name" : "崇文区" 9       }, { 10         "name" : "宣武区" 11       }, { 12         "name" : "昌平区" 13       }, { 14         "name" : "朝阳区" 15       }, { 16         "name" : "海淀区" 17       }, { 18         "name" : "丰台区" 19       }, { 20         "name" : "石景山区" 21       }, { 22         "name" : "门头沟区" 23       }, { 24         "name" : "房山区" 25       }, { 26         "name" : "通州区" 27       }, { 28         "name" : "顺义区" 29       }, { 30         "name" : "大兴区" 31       }, { 32         "name" : "平谷区" 33       }, { 34         "name" : "怀柔区" 35       }, { 36         "name" : "密云县" 37       }, { 38         "name" : "延庆县" 39       } ], 40       "name" : "北京市" 41     },{ 42       "areas" : [ { 43         "name" : "合肥市" 44       }, { 45         "name" : "滁州市" 46       }, { 47         "name" : "蚌埠市" 48       }, { 49         "name" : "芜湖市" 50       }, { 51         "name" : "淮南市" 52       }, { 53         "name" : "淮北市" 54       }, { 55         "name" : "马鞍山市" 56       }, { 57         "name" : "安庆市" 58       }, { 59         "name" : "宿州市" 60       }, { 61         "name" : "阜阳市" 62       }, { 63         "name" : "亳州市" 64       }, { 65         "name" : "黄山市" 66       }, { 67         "name" : "铜陵市" 68       }, { 69         "name" : "宣城市" 70       }, { 71         "name" : "六安市" 72       }, { 73         "name" : "池州市" 74       } ], 75       "name" : "安徽省" 76     }, { 77       "areas" : [ { 78         "name" : "福州市" 79       }, { 80         "name" : "厦门市" 81       }, { 82         "name" : "宁德市" 83       }, { 84         "name" : "莆田市" 85       }, { 86         "name" : "泉州市" 87       }, { 88         "name" : ">" 89       }, { 90         "name" : "漳州市" 91       }, { 92         "name" : "龙岩市" 93       }, { 94         "name" : "三明市" 95       }, { 96         "name" : "南平市" 97       } ], 98       "name" : "福建省" 99     }, {100       "areas" : [ {101         "name" : "兰州市"102       }, {103         "name" : "临夏州"104       }, {105         "name" : "定西市"106       }, {107         "name" : "平凉市"108       }, {109         "name" : "庆阳市"110       }, {111         "name" : "武威市"112       }, {113         "name" : "金昌市"114       }, {115         "name" : "张掖市"116       }, {117         "name" : "酒泉市"118       }, {119         "name" : "嘉峪关市"120       }, {121         "name" : "天水市"122       }, {123         "name" : "陇南市"124       }, {125         "name" : "甘南州"126       }, {127         "name" : "白银市"128       } ],129       "name" : "甘肃省"130     }];131     function loadCityPar() {132       var cityPar = '<option value="0">请选择省</option>';133       var lenPar = _json.length;  //省市数量134       for(var i=0; i<lenPar; i++){135         var n = i + 1;136         cityPar += '<option value="'+n+'">'+_json[i].name+'</option>';137 138       }139       $('#cityParent').html(cityPar);140     }141     loadCityPar();142 143     $(page).on('change','#cityParent',function () {144       var index = $('#cityParent option').not(function(){ return !this.selected }).index();145       var i = index - 1;146       if(i >= 0){147         var city = '<option value="0">请选择市</option>';148         var len = _json[i].areas.length;149         for(var j=0; j<len; j++){150           var m = j + 1;151           city += '<option value="'+m+'">'+_json[i].areas[j].name+'</option>';152         }153         $('#city').html(city);154       }155     });

1 .wgyHospital .select01,.wgyHospital .select02{ padding-left:.3rem; padding-right:.3rem; height:1.6rem; line-height:1.6rem; border:1px solid #ccc; text-align:center;}2 .wgyHospital .select01{ border-radius:.75rem 0 0 .75rem;}3 .wgyHospital .select02{ border-radius:0 .75rem .75rem 0; border-left:none;}