Simple implementation of provincial/municipal selection (based on zepto. js), provincial/municipal zepto. js

Simple implementation of provincial/municipal selection (based on zepto. js), provincial/municipal zepto. js

The effect is as follows:

<Div class = "clList overflow-h mt75"> <select class = "pull-left cl-35 select01" id = "cityParent"> <option> select province </option> </select> <select class = "pull-left cl-35 select02" id = "city"> <option> select city </option> </select> </div>

// Test data var _ json = [{"areas": [{"name": "Dongcheng District" },{ "name": "Xicheng district" },{ "name ": "Chongwen District" },{ "name": "Xuanwu District" },{ "name": "Changping District" },{ "name": "Chaoyang District" },{ "name ": "Haidian District" },{ "name": "Fengtai District" },{ "name": "Shijingshan district" },{ "name": "Mentougou District" },{ "name ": "Fangshan District" },{ "name": "Tongzhou District" },{ "name": "Shunyi District" },{ "name": "Daxing District" },{ "name ": "Pinggu district" },{ "name": "Huairou district" },{ "name": "Miyun county" },{ "name": "Yanqing County"}], "na Me ":" Beijing "},{" areas ": [{" name ":" Hefei "},{" name ":" Chuzhou "},{" name ": "Bengbu City" },{ "name": "Wuhu City" },{ "name": "HuaiNan City" },{ "name": "Huaibei City" },{ "name ": "ma'anshan City" },{ "name": "Anqing City" },{ "name": "Suzhou City" },{ "name": "Fuyang City" },{ "name ": "" },{ "name": "Huangshan city" },{ "name": "Tongling City" },{ "name": "xuancheng City" },{ "name ": "Lu 'an city" },{ "name": "Chizhou city"}], "name": "Anhui Province" },{ "areas": [{"name": "Fuzhou City" },{ "Name": "Xiamen City" },{ "name": "Ningde City" },{ "name": "Putian City" },{ "name ": "Quanzhou" },{ "name": ">" },{ "name": "Zhangzhou City" },{ "name": "Longyan city" },{ "name ": "Sanming" },{ "name": "Nanping city"}], "name": "Fujian Province" },{ "areas": [{"name ": "Lanzhou City" },{ "name": "Linxia state" },{ "name": "Dingxi city" },{ "name": "Pingliang city" },{ "name ": "Qingyang City" },{ "name": "Wuwei City" },{ "name": "Jinchang city" },{ "name": "Changzhi City" },{ "name ": "Jiuquan City" },{ "na Me ":" Jiayuguan City "},{" name ":" Tianshui City "},{" name ":" Longnan City "},{" name ":" Gannan "}, {"name": "Baiyin City"}], "name": "Gansu Province"}]; function loadCityPar () {var cityPar = '<option value = "0"> select province </option>'; var lenPar = _ json. length; // number of provinces and cities for (var I = 0; I <lenPar; I ++) {var n = I + 1; cityPar + = '<option value = "' + n + '">' + _ json [I]. name + '</option>';} parameter ('{cityparent'{.html (cityPar);} loadCityPar (); $ (page ). on ('chang E ',' # cityParent ', function () {var index = $ (' # cityParent option '). not (function () {return! This. selected }). index (); var I = index-1; if (I> = 0) {var city = '<option value = "0"> select city </option> '; var len = _ json [I]. areas. length; for (var j = 0; j <len; j ++) {var m = j + 1; city + = '<option value = "' + m + '">' + _ json [I]. areas [j]. name + '</option>';} parameter ('{city'{.html (city );}});

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

The above is all the simple implementation (based on zepto. js) of the provinces and cities that xiaobian has brought to you. I hope you can support more customers ~