效果如下：
<div> <select id="cityParent"> <option>請選擇省</option> </select> <select 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)的全部內容了，希望大家多多支持武林網~