效果如下:
<div class=\"clList overflow-h mt75\"> <select class=\"pull-left cl-35 select01\" id=\"cityParent\"> <option>请选择省</option> </select> <select class=\"pull-left cl-35 select02\" id=\"city\"> <option>请选择市</option> </select> </div>
//测试数据 var _json = [ { \"areas\" : [ { \"name\" : \"东城区\" }, { \"name\" : \"西城区\" }, { \"name\" : \"崇文区\" }, { \"name\" : \"宣武区\" }, { \"name\" : \"昌平区\" }, { \"name\" : \"朝阳区\" }, { \"name\" : \"海淀区\" }, { \"name\" : \"丰台区\" }, { \"name\" : \"石景山区\" }, { \"name\" : \"门头沟区\" }, { \"name\" : \"房山区\" }, { \"name\" : \"通州区\" }, { \"name\" : \"顺义区\" }, { \"name\" : \"大兴区\" }, { \"name\" : \"平谷区\" }, { \"name\" : \"怀柔区\" }, { \"name\" : \"密云县\" }, { \"name\" : \"延庆县\" } ], \"name\" : \"北京市\" },{ \"areas\" : [ { \"name\" : \"合肥市\" }, { \"name\" : \"滁州市\" }, { \"name\" : \"蚌埠市\" }, { \"name\" : \"芜湖市\" }, { \"name\" : \"淮南市\" }, { \"name\" : \"淮北市\" }, { \"name\" : \"马鞍山市\" }, { \"name\" : \"安庆市\" }, { \"name\" : \"宿州市\" }, { \"name\" : \"阜阳市\" }, { \"name\" : \"亳州市\" }, { \"name\" : \"黄山市\" }, { \"name\" : \"铜陵市\" }, { \"name\" : \"宣城市\" }, { \"name\" : \"六安市\" }, { \"name\" : \"池州市\" } ], \"name\" : \"安徽省\" }, { \"areas\" : [ { \"name\" : \"福州市\" }, { \"name\" : \"厦门市\" }, { \"name\" : \"宁德市\" }, { \"name\" : \"莆田市\" }, { \"name\" : \"泉州市\" }, { \"name\" : \">\" }, { \"name\" : \"漳州市\" }, { \"name\" : \"龙岩市\" }, { \"name\" : \"三明市\" }, { \"name\" : \"南平市\" } ], \"name\" : \"福建省\" }, { \"areas\" : [ { \"name\" : \"兰州市\" }, { \"name\" : \"临夏州\" }, { \"name\" : \"定西市\" }, { \"name\" : \"平凉市\" }, { \"name\" : \"庆阳市\" }, { \"name\" : \"武威市\" }, { \"name\" : \"金昌市\" }, { \"name\" : \"张掖市\" }, { \"name\" : \"酒泉市\" }, { \"name\" : \"嘉峪关市\" }, { \"name\" : \"天水市\" }, { \"name\" : \"陇南市\" }, { \"name\" : \"甘南州\" }, { \"name\" : \"白银市\" } ], \"name\" : \"甘肃省\" }]; function loadCityPar() { var cityPar = \'<option value=\"0\">请选择省</option>\'; var lenPar = _json.length; //省市数量 for(var i=0; i<lenPar; i++){ var n = i + 1; cityPar += \'<option value=\"\'+n+\'\">\'+_json[i].name+\'</option>\'; } $(\'#cityParent\').html(cityPar); } 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\">请选择市</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;}
以上就是小编为大家带来的省市选择的简单实现(基于zepto.js)的全部内容了,希望大家多多支持phpstudy~
本文地址:https://www.stayed.cn/item/21698
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我