省市选择(基于zepto.js)

Posted 2020-07-28 前端渣的博客园

效果如下：

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