全國省市二級聯(lián)動下拉菜單 js版
更新時間:2016年05月10日 11:46:58 作者:火紅橘子
這篇文章主要為大家詳細介紹了基于javascript實現(xiàn)全國省市二級聯(lián)動下拉菜單,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)二級聯(lián)動下拉菜單的具體代碼,供大家參考,具體內(nèi)容如下
js代碼部分:
/* * 全國二級城市聯(lián)動 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; } Dsy.prototype.Exists = function(id){ if(typeof(this.Items[id]) == "undefined") return false; return true; } function change(v){ var str="0"; for(i=0;i<v;i++){ str+=("_"+(document.getElementById(s[i]).selectedIndex-1)); }; var ss=document.getElementById(s[v]); with(ss){ length = 0; options[0]=new Option(opt0[v],opt0[v]); if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v){ if(dsy.Exists(str)){ ar = dsy.Items[str]; for(i=0;i<ar.length;i++){ options[length]=new Option(ar[i],ar[i]); }//end for if(v){ options[0].selected = true; } } }//end if v if(++v<s.length){change(v);} }//End with } var dsy = new Dsy(); dsy.add("0",["北京市","天津市","上海市","重慶市","河北省","山西省","內(nèi)蒙古","遼寧省","吉林省","黑龍江省","江蘇省","浙江省","安徽省","福建省","江西省","山東省","河南省","湖北省","湖南省","廣東省","廣西","海南省","四川省","貴州省","云南省","西藏","陜西省","甘肅省","青海省","寧夏","新疆","香港","澳門","臺灣省"]); dsy.add("0_0",["東城區(qū)","西城區(qū)","崇文區(qū)","宣武區(qū)","朝陽區(qū)","豐臺區(qū)","石景山區(qū)","海淀區(qū)","門頭溝區(qū)","房山區(qū)","通州區(qū)","順義區(qū)","昌平區(qū)","大興區(qū)","懷柔區(qū)","平谷區(qū)","密云縣","延慶縣","延慶鎮(zhèn)"]); dsy.add("0_1",["和平區(qū)","河東區(qū)","河西區(qū)","南開區(qū)","河北區(qū)","紅橋區(qū)","塘沽區(qū)","漢沽區(qū)","大港區(qū)","東麗區(qū)","西青區(qū)","津南區(qū)","北辰區(qū)","武清區(qū)","寶坻區(qū)","薊縣","寧河縣","蘆臺鎮(zhèn)","靜??h","靜海鎮(zhèn)"]); dsy.add("0_2",["黃浦區(qū)","盧灣區(qū)","徐匯區(qū)","長寧區(qū)","靜安區(qū)","普陀區(qū)","閘北區(qū)","虹口區(qū)","楊浦區(qū)","閔行區(qū)","寶山區(qū)","嘉定區(qū)","浦東新區(qū)","金山區(qū)","松江區(qū)","青浦區(qū)","南匯區(qū)","奉賢區(qū)","崇明縣","城橋鎮(zhèn)"]); dsy.add("0_3",["渝中區(qū)","大渡口區(qū)","江北區(qū)","沙坪壩區(qū)","九龍坡區(qū)","南岸區(qū)","北碚區(qū)","萬盛區(qū)","雙橋區(qū)","渝北區(qū)","巴南區(qū)","萬州區(qū)","涪陵區(qū)","黔江區(qū)","長壽區(qū)","合川市","永川區(qū)市","江津市","南川市","綦江縣","潼南縣","銅梁縣","大足縣","榮昌縣","璧山縣","墊江縣","武隆縣","豐都縣","城口縣","梁平縣","開縣","巫溪縣","巫山縣","奉節(jié)縣","云陽縣","忠縣","石柱土家族自治縣","彭水苗族土家族自治縣","酉陽土家族苗族自治縣","秀山土家族苗族自治縣"]); dsy.add("0_4",["石家莊市","張家口市","承德市","秦皇島市","唐山市","廊坊市","保定市","衡水市","滄州市","邢臺市","邯鄲市"]); dsy.add("0_5",["太原市","朔州市","大同市","陽泉市","長治市","晉城市","忻州市","晉中市","臨汾市","呂梁市","運城市"]); dsy.add("0_6",["呼和浩特市","包頭市","烏海市","赤峰市","通遼市","呼倫貝爾市","鄂爾多斯市","烏蘭察布市","巴彥淖爾市","興安盟","錫林郭勒盟","阿拉善盟"]); dsy.add("0_7",["沈陽市","朝陽市","阜新市","鐵嶺市","撫順市","本溪市","遼陽市","鞍山市","丹東市","大連市","營口市","盤錦市","錦州市","葫蘆島市"]); dsy.add("0_8",["長春市","白城市","松原市","吉林市","四平市","遼源市","通化市","白山市","延邊州"]); dsy.add("0_9",["哈爾濱市","齊齊哈爾市","七臺河市","黑河市","大慶市","鶴崗市","伊春市","佳木斯市","雙鴨山市","雞西市","牡丹江市","綏化市","大興安嶺地區(qū)"]); dsy.add("0_10",["南京市","徐州市","連云港市","宿遷市","淮安市","鹽城市","揚州市","泰州市","南通市","鎮(zhèn)江市","常州市","無錫市","蘇州市"]); dsy.add("0_11",["杭州市","湖州市","嘉興市","舟山市","寧波市","紹興市","衢州市","金華市","臺州市","溫州市","麗水市"]); dsy.add("0_12",["合肥市","宿州市","淮北市","亳州市","阜陽市","蚌埠市","淮南市","滁州市","馬鞍山市","蕪湖市","銅陵市","安慶市","黃山市","六安市","巢湖市","池州市","宣城市"]); dsy.add("0_13",["福州市","南平市","莆田市","三明市","泉州市","廈門市","漳州市","龍巖市","寧德市"]); dsy.add("0_14",["南昌市","九江市","景德鎮(zhèn)市","鷹潭市","新余市","萍鄉(xiāng)市","贛州市","上饒市","撫州市","宜春市","吉安市"]); dsy.add("0_15",["濟南市","青島市","聊城市","德州市","東營市","淄博市","濰坊市","煙臺市","威海市","日照市","臨沂市","棗莊市","濟寧市","泰安市","萊蕪市","濱州市","菏澤市"]); dsy.add("0_16",["鄭州市","開封市","三門峽市","洛陽市","焦作市","新鄉(xiāng)市","鶴壁市","安陽市","濮陽市","商丘市","許昌市","漯河市","平頂山市","南陽市","信陽市","周口市","駐馬店市","濟源市"]); dsy.add("0_17",["武漢市","十堰市","襄樊市","荊門市","孝感市","黃岡市","鄂州市","黃石市","咸寧市","荊州市","宜昌市","隨州市","省直轄縣級行政單位","恩施州"]); dsy.add("0_18",["長沙市","張家界市","常德市","益陽市","岳陽市","株洲市","湘潭市","衡陽市","郴州市","永州市","邵陽市","懷化市","婁底市","湘西州"]); dsy.add("0_19",["廣州市","深圳市","清遠市","韶關(guān)市","河源市","梅州市","潮州市","汕頭市","揭陽市","汕尾市","惠州市","東莞市","珠海市","中山市","江門市","佛山市","肇慶市","云浮市","陽江市","茂名市","湛江市"]); dsy.add("0_20",["南寧市","桂林市","柳州市","梧州市","貴港市","玉林市","欽州市","北海市","防城港市","崇左市","百色市","河池市","來賓市","賀州市"]); dsy.add("0_21",["??谑?,"三亞市","省直轄行政單位"]); dsy.add("0_22",["成都市","廣元市","綿陽市","德陽市","南充市","廣安市","遂寧市","內(nèi)江市","樂山市","自貢市","瀘州市","宜賓市","攀枝花市","巴中市","達州市","資陽市","眉山市","雅安市","阿壩州","甘孜州","涼山州"]); dsy.add("0_23",["貴陽市","六盤水市","遵義市","安順市","畢節(jié)地區(qū)","銅仁地區(qū)","黔東南州","黔南州","黔西南州"]); dsy.add("0_24",["昆明市","曲靖市","玉溪市","保山市","昭通市","麗江市","思茅市","臨滄市","德宏州","怒江州","迪慶州","大理州","楚雄州","紅河州","文山州","西雙版納州"]); dsy.add("0_25",["拉薩市","那曲地區(qū)","昌都地區(qū)","林芝地區(qū)","山南地區(qū)","日喀則地區(qū)","阿里地區(qū)"]); dsy.add("0_26",["西安市","延安市","銅川市","渭南市","咸陽市","寶雞市","漢中市","榆林市","安康市","商洛市"]); dsy.add("0_27",["蘭州市","嘉峪關(guān)市","白銀市","天水市","武威市","酒泉市","張掖市","慶陽市","平?jīng)鍪?,"定西市","隴南市","臨夏州","甘南州"]); dsy.add("0_28",["西寧市","海東地區(qū)","海北州","海南州","黃南州","果洛州","玉樹州","海西州"]); dsy.add("0_29",["銀川市","石嘴山市","吳忠市","固原市","中衛(wèi)市"]); dsy.add("0_30",["烏魯木齊市","克拉瑪依市","自治區(qū)直轄縣級行政單位","喀什地區(qū)","阿克蘇地區(qū)","和田地區(qū)","吐魯番地區(qū)","哈密地區(qū)","克孜勒蘇柯州","博爾塔拉州","昌吉州","巴音郭楞州","伊犁州","塔城地區(qū)","阿勒泰地區(qū)"]); dsy.add("0_31",["香港特別行政區(qū)"]); dsy.add("0_32",["澳門特別行政區(qū)"]); dsy.add("0_33",["臺北","高雄","臺中","花蓮","基隆","嘉義","金門","連江","苗栗","南投","澎湖","屏東","臺東","臺南","桃園","新竹","宜蘭","云林","彰化"]); dsy.add("0",["北京市","天津市","上海市","重慶市","河北省","山西省","內(nèi)蒙古","遼寧省","吉林省","黑龍江省","江蘇省","浙江省","安徽省","福建省","江西省","山東省","河南省","湖北省","湖南省","廣東省","廣西","海南省","四川省","貴州省","云南省","西藏","陜西省","甘肅省","青海省","寧夏","新疆","香港","澳門","臺灣省"]); var s=["s_province","s_city"];//三個select的name var opt0 = ["省份","地級市"];//初始值 function _init_area(){ //初始化函數(shù) for(i=0;i<s.length-1;i++){ document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")"); } change(0); }
html代碼部分:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>全國城市二級聯(lián)動</title> <style type="text/css"> body{ background:#EEEEEE;margin:0; padding:0; font-family:"微軟雅黑", Arial, Helvetica, sans-serif; } a{ color:#006600; text-decoration:none;} a:hover{color:#990000;} .top{ margin:5px auto; color:#990000; text-align:center;} .info select{ border:1px #993300 solid; background:#FFFFFF;} .info{ margin:5px; text-align:center;} .info #show{ color:#3399FF; } .bottom{ text-align:right; font-size:12px; color:#CCCCCC; width:1000px;} </style> </head> <body> <div class="top"> <h1>全國城市二級聯(lián)動</h1> </div> <div class="info"> <div> <select id="s_province" name="s_province"></select> <select id="s_city" name="s_city" ></select> <script class="resources library" src="area.js" type="text/javascript"></script> <script type="text/javascript">_init_area();</script> </div> </div> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助。
您可能感興趣的文章:
- js實現(xiàn)的全國省市二級聯(lián)動下拉選擇菜單完整實例
- JS實多級聯(lián)動下拉菜單類,簡單實現(xiàn)省市區(qū)聯(lián)動菜單!
- javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單
- jsp從數(shù)據(jù)庫獲取數(shù)據(jù)填充下拉框?qū)崿F(xiàn)二級聯(lián)動菜單的方法
- 省市區(qū)三級聯(lián)動下拉框菜單javascript版
- js實現(xiàn)簡單的聯(lián)動菜單效果
- js實現(xiàn)select二級聯(lián)動下拉菜單
- JS簡單實現(xiàn)多級Select聯(lián)動菜單效果代碼
- 實例詳解AngularJS實現(xiàn)無限級聯(lián)動菜單
- JavaScript+node實現(xiàn)三級聯(lián)動菜單
相關(guān)文章
小程序云開發(fā)如何實現(xiàn)圖片上傳及發(fā)表文字
這篇文章主要為大家詳細介紹了小程序云開發(fā)教程,如何實現(xiàn)圖片上傳及發(fā)表文字,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-05-05JavaScript使用delete刪除數(shù)組元素用法示例【數(shù)組長度不變】
這篇文章主要介紹了JavaScript使用delete刪除數(shù)組元素用法,結(jié)合實例形式分析了delete刪除數(shù)組元素的具體用法與注意事項,需要的朋友可以參考下2017-01-01ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法示例
這篇文章主要介紹了ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法,結(jié)合實例形式分析了Map的功能、使用方法及相關(guān)注意事項,需要的朋友可以參考下2017-03-03IE和Firefox下javascript的兼容寫法小結(jié)
學習js的朋友必須要知道或了解的知識2008-12-12