The effects are as follows:
<div> <select id="cityParent"> <option>Please select province</option> </select> <select id="city"> <option>Please 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" : "Tongzhou District" }, { "name" : " "name" : "Shunyi District" }, { "name" : "Daxing District" }, { "name" : "Pinggu District" }, { "name" : "Huairou District" }, { "name" : "Miyun County" }, { "name" : "Yanqing County" } ], "name" : "Beijing City" }, { "areas" : [ { "name" : "Hefei City" }, { "name" : "Chuzhou City" }, { "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" : "Bozhou City" }, { "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 City" }, { "name" : ">" }, { "name" : "Zhangzhou City" }, { "name" : "Longyan City" }, { "name" : "Sanming City" }, { "name" : "Nanping City" }], "name" : "Fujian Province" }, { "areas" : [ { "name" : "Lanzhou City" }, { "name" : "Linxia Prefecture" }, { "name" : "Dingxi City" }, { "name" : "Pingliang City" }, { "name" : "Qingyang City" }, { "name" : "Wuwei City" }, { "name" : "Jinchang City" }, { "name" : "Zhangye City" }, { "name" : "Jiuquan City" }, { "name" : "Jiayuguan City" }, { "name" : "Tianshui City" }, { "name" : "Longnan City" }, { "name" : "Gannan Prefecture" }, { "name" : "Baiyin City" } ], "name" : "Gansu Province" }]; function loadCityPar() { var cityPar = '<option value="0">Please 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>'; } $('#cityParent').html(cityParent); } loadCityPar(); $(page).on('change','#cityParent',function () { var index = $('#cityParent option').not(function(){ return !this.selected }).index(); var i = index - 1; if(i >= 0){ var city = '<option value="0">Please 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>'; } $('#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 content of the simple implementation (based on zepto.js) that the editor has brought to you. I hope everyone will support Wulin.com more~