省市選擇的簡單實現(xiàn)(基于zepto.js)
效果如下:
<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>
//測試數(shù)據(jù) var _json = [ { "areas" : [ { "name" : "東城區(qū)" }, { "name" : "西城區(qū)" }, { "name" : "崇文區(qū)" }, { "name" : "宣武區(qū)" }, { "name" : "昌平區(qū)" }, { "name" : "朝陽區(qū)" }, { "name" : "海淀區(qū)" }, { "name" : "豐臺區(qū)" }, { "name" : "石景山區(qū)" }, { "name" : "門頭溝區(qū)" }, { "name" : "房山區(qū)" }, { "name" : "通州區(qū)" }, { "name" : "順義區(qū)" }, { "name" : "大興區(qū)" }, { "name" : "平谷區(qū)" }, { "name" : "懷柔區(qū)" }, { "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" : "平?jīng)鍪? }, { "name" : "慶陽市" }, { "name" : "武威市" }, { "name" : "金昌市" }, { "name" : "張掖市" }, { "name" : "酒泉市" }, { "name" : "嘉峪關(guān)市" }, { "name" : "天水市" }, { "name" : "隴南市" }, { "name" : "甘南州" }, { "name" : "白銀市" } ], "name" : "甘肅省" }]; function loadCityPar() { var cityPar = '<option value="0">請選擇省</option>'; var lenPar = _json.length; //省市數(shù)量 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;}
以上就是小編為大家?guī)淼氖∈羞x擇的簡單實現(xiàn)(基于zepto.js)的全部內(nèi)容了,希望大家多多支持腳本之家~
相關(guān)文章
Javascript下IE與Firefox下的差異兼容寫法總結(jié)
總結(jié)一部分IE和Firefox的javascript差異寫法,對于像書寫多瀏覽器兼容性更好的代碼,可以參考下。2010-06-06JS實現(xiàn)側(cè)邊欄鼠標經(jīng)過彈出框+緩沖效果
本文主要介紹了JS實現(xiàn)側(cè)邊欄鼠標經(jīng)過彈出框+緩沖效果的實現(xiàn)原理與方法步驟。具有很好的參考價值,下面跟著小編一起來看下吧2017-03-03JS樹形菜單組件Bootstrap TreeView使用方法詳解
這篇文章主要為大家詳細介紹了js組件Bootstrap TreeView使用方法,本文一部分針對于bootstrap的treeview的實踐,另一部分是介紹自己寫的樹形菜單,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12淺談js控制li標簽排序問題 js調(diào)用php函數(shù)的方法
下面小編就為大家?guī)硪黄獪\談js控制li標簽排序問題 js調(diào)用php函數(shù)的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10詳解Webpack如何引入CDN鏈接來優(yōu)化編譯后的體積
這篇文章主要介紹了詳解Webpack如何引入CDN鏈接來優(yōu)化編譯后的體積,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-06-06typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別
這篇文章主要為大家介紹了typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11Jquery把獲取到的input值轉(zhuǎn)換成json
本篇文章主要介紹了Jquery把獲取到的input值轉(zhuǎn)換成json的相關(guān)知識,具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05Javascript代碼混淆綜合解決方案-Javascript在線混淆器
Javascript代碼混淆綜合解決方案-Javascript在線混淆器...2006-12-12