Selection of provinces and cities (based on Zepto.js)

The effect is as follows:

1  　　　　　　　　　　 <Divclass= "Cllist overflow-h mt75">2                     <Selectclass= "Pull-left cl-35 select01"ID= "Cityparent">3                         <option>Please select the province</option>4                     </Select>5                     <Selectclass= "Pull-left cl-35 select02"ID= "City">6                         <option>Please select a city</option>7                     </Select>8                 </Div>

1 //test Data2 var_json = [ {3"Areas" : [ {4"Name": "Dongcheng District"5             }, {6"Name": "Xicheng"7             }, {8"Name": "Chongwen District"9             }, {Ten"Name": "Xuanwu District" One             }, { A"Name": "Changping District" -             }, { -"Name": "Chaoyang District" the             }, { -"Name": "Haidian District" -             }, { -"Name": "Fengtai" +             }, { -"Name": "Shijingshan District" +             }, { A"Name": "Mentougou District" at             }, { -"Name": "Fangshan" -             }, { -"Name": "Tongzhou District" -             }, { -"Name": "Shunyi District" in             }, { -"Name": "Daxing District" to             }, { +"Name": "Pinggu District" -             }, { the"Name": "Huairou" *             }, { $"Name": "Miyun"Panax Notoginseng             }, { -"Name": "Yanqing County" the             } ], +"Name": "Beijing" A         },{ the"Areas" : [ { +"Name": "Hefei" -             }, { $"Name": "Chuzhou" $             }, { -"Name": "Bangbu" -             }, { the"Name": "Wuhu" -             }, {Wuyi"Name": "Huainan" the             }, { -"Name": "Huaibei" Wu             }, { -"Name": "Maanshan" About             }, { $"Name": "Anqing" -             }, { -"Name": "Suzhou" -             }, { A"Name": "Fuyang" +             }, { the"Name": "Bozhou" -             }, { $"Name": "Huangshan" the             }, { the"Name": "Tongling" the             }, { the"Name": "Xuancheng" -             }, { in"Name": "Liu'an" the             }, { the"Name": "Chizhou" About             } ], the"Name": "Anhui Province" the         }, { the"Areas" : [ { +"Name": "Fuzhou" -             }, { the"Name": "Xiamen City"Bayi             }, { the"Name": "Ningde" the             }, { -"Name": "Putian" -             }, { the"Name": "Quanzhou" the             }, { the"Name": ">" the             }, { -"Name": "Zhangzhou" the             }, { the"Name": "Longyan" the             }, {94"Name": "Sanming" the             }, { the"Name": "Nanping" the             } ],98"Name": "Fujian Province" About         }, { -"Areas" : [ {101"Name": "Lanzhou City"102             }, {103"Name": "Linxia State"104             }, { the"Name": "Dingxi City"106             }, {107"Name": "Pingliang"108             }, {109"Name": "Qingyang City" the             }, {111"Name": "Wuwei" the             }, {113"Name": "Jinchang" the             }, { the"Name": "Zhangye" the             }, {117"Name": "Jiuquan"118             }, {119"Name": "Jiayuguan" -             }, {121"Name": "Tianshui"122             }, {123"Name": "Longnan"124             }, { the"Name": "Gannan State"126             }, {127"Name": "Baiyin" -             } ],129"Name": "Gansu Province" the         }];131         functionLoadcitypar () { the             varCitypar = ' <option value= ' 0 ' > Please select Province </option> ';133             varLenpar = _json.length;//Number of Provinces134              for(vari=0; i<lenpar; i++){135                 varn = i + 1;136Citypar + = ' <option value= "' +n+ '" > ' +_json[i].name+ ' </option> ';137 138             }139$ (' #cityParent '). HTML (citypar); $         }141 Loadcitypar ();142 143$ (page). On (' Change ', ' #cityParent ',function () {144             varIndex = $ (' #cityParent option '). Not (function(){return! This. Selected}). Index ();145             vari = Index-1;146             if(I >= 0){147                 varCity = ' <option value= ' 0 ' > Please select Municipal </option> ';148                 varLen =_json[i].areas.length;149                  for(varj=0; j<len; J + +){ Max                     varm = j + 1;151City + = ' <option value= ' ' +m+ ' > ' +_json[i].areas[j].name+ ' </option> '; the                 }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;}

Selection of provinces and cities (based on Zepto.js)