js實(shí)現(xiàn)全國(guó)省份城市級(jí)聯(lián)下拉菜單效果代碼
本文實(shí)例講述了js實(shí)現(xiàn)全國(guó)省份城市級(jí)聯(lián)下拉菜單效果代碼。分享給大家供大家參考。具體如下:
這是一個(gè)大家都知道的網(wǎng)頁小功能,很常見,全國(guó)省份與城市級(jí)聯(lián)菜單,采用Select下拉的方式選擇數(shù)據(jù),不過現(xiàn)在很多都Ajax了,貌似這種老形式已經(jīng)過時(shí)了,不過在兼容性方面,仍然是不落后的。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-conv-city-xl-menu-style-codes/
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>全國(guó)省份城市級(jí)聯(lián)下拉菜單</title> </head> <body> <script language="javascript"> cityareaname=new Array(35); cityareacode=new Array(35); function first(preP,preC,formname,selectP,selectC) { a=0; if (selectP=='01') { a=1;tempoption=new Option('北京','01',false,true); } else { tempoption=new Option('北京','01'); } eval('document.'+formname+'.'+preP+'.options[1]=tempoption;'); cityareacode[0]=new Array('0101','0102','0103','0104','0105','0106','0107','0108'); cityareaname[0]=new Array('東城區(qū)','西城區(qū)','崇文區(qū)','宣武區(qū)','朝陽區(qū)','海淀區(qū)','豐臺(tái)區(qū)','石景山'); if (selectP=='02') { a=2;tempoption=new Option('深圳','02',false,true); } else { tempoption=new Option('深圳','02'); } eval('document.'+formname+'.'+preP+'.options[2]=tempoption;'); cityareacode[1]=new Array('0201','0202','0203','0204','0205','0206'); cityareaname[1]=new Array('羅湖','福田','南山','鹽田','寶安','龍崗'); if (selectP=='03') { a=3;tempoption=new Option('上海','03',false,true); } else { tempoption=new Option('上海','03'); } eval('document.'+formname+'.'+preP+'.options[3]=tempoption;'); cityareacode[2]=new Array('0301','0302','0303','0304','0305','0306','0307','0308','0309','0310','0311','0312','0313','0314','0315','0316','0317','0318','0319','0320'); cityareaname[2]=new Array('寶山','金山','南市','長(zhǎng)寧','靜安','青浦','崇明','盧灣','松江','奉賢','浦東','楊浦','虹口','普陀','閘北','黃浦','閔行','徐匯','嘉定','南匯'); if (selectP=='04') { a=4;tempoption=new Option('重慶','04',false,true); } else { tempoption=new Option('重慶','04'); } eval('document.'+formname+'.'+preP+'.options[4]=tempoption;'); cityareacode[3]=new Array('0401','0402','0403','0404','0405','0406'); cityareaname[3]=new Array('渝中','江北','沙坪壩','南岸','九龍坡','大渡口'); if (selectP=='05') { a=5;tempoption=new Option('天津','05',false,true); } else { tempoption=new Option('天津','05'); } eval('document.'+formname+'.'+preP+'.options[5]=tempoption;'); cityareacode[4]=new Array('0501','0502','0503','0504','0505','0506','0507','0508','0509','0510','0511','0512','0513','0514','0515'); cityareaname[4]=new Array('和平','河北','河西','河?xùn)|','南開','紅橋','塘沽','漢沽','大港','東麗','西青','津南','北辰','武清','濱海'); if (selectP=='06') { a=6;tempoption=new Option('廣東','06',false,true); } else { tempoption=new Option('廣東','06'); } eval('document.'+formname+'.'+preP+'.options[6]=tempoption;'); cityareacode[5]=new Array('0601','0602','0603','0604','0605','0606','0607','0608','0609','0610','0611','0612','0613','0614','0615'); cityareaname[5]=new Array('廣州','珠海','中山','佛山','東莞','清遠(yuǎn)','肇慶','陽江','湛江','韶關(guān)','惠州','河源','汕尾','汕頭','梅州'); if (selectP=='07') { a=7;tempoption=new Option('河北','07',false,true); } else { tempoption=new Option('河北','07'); } eval('document.'+formname+'.'+preP+'.options[7]=tempoption;'); cityareacode[6]=new Array('0701','0702','0703','0704','0705','0706','0707','0708','0709','0710','0711'); cityareaname[6]=new Array('石家莊','唐山','秦皇島','邯鄲','邢臺(tái)','張家口','承德','廊坊','滄州','保定','衡水'); if (selectP=='08') { a=8;tempoption=new Option('山西','08',false,true); } else { tempoption=new Option('山西','08'); } eval('document.'+formname+'.'+preP+'.options[8]=tempoption;'); cityareacode[7]=new Array('0801','0802','0803','0804','0805','0806','0807'); cityareaname[7]=new Array('太原','大同','陽泉','朔州','長(zhǎng)治','臨汾','晉城'); if (selectP=='09') { a=9;tempoption=new Option('內(nèi)蒙古','09',false,true); } else { tempoption=new Option('內(nèi)蒙古','09'); } eval('document.'+formname+'.'+preP+'.options[9]=tempoption;'); cityareacode[8]=new Array('0901','0902','0903','0904','0905','0906','0907','0908','0909','0910','0911'); cityareaname[8]=new Array('呼和浩特','包頭','烏海','臨河','東勝','集寧','錫林浩特','通遼','赤峰','海拉爾','烏蘭浩特'); if (selectP=='10') { a=10;tempoption=new Option('遼寧','10',false,true); } else { tempoption=new Option('遼寧','10'); } eval('document.'+formname+'.'+preP+'.options[10]=tempoption;'); cityareacode[9]=new Array('1001','1002','1003','1004','1005','1006','1007','1008','1009','1010','1011','1012','1013','1014'); cityareaname[9]=new Array('沈陽','大連','鞍山','錦州','丹東','盤錦','鐵嶺','撫順','營(yíng)口','遼陽','阜新','本溪','朝陽','葫蘆島'); if (selectP=='11') { a=11;tempoption=new Option('吉林','11',false,true); } else { tempoption=new Option('吉林','11'); } eval('document.'+formname+'.'+preP+'.options[11]=tempoption;'); cityareacode[10]=new Array('1101','1102','1103','1104','1105','1106','1107','1108','1109'); cityareaname[10]=new Array('長(zhǎng)春','吉林','四平','遼源','通化','白山','松原','白城','延邊'); if (selectP=='12') { a=12;tempoption=new Option('黑龍江','12',false,true); } else { tempoption=new Option('黑龍江','12'); } eval('document.'+formname+'.'+preP+'.options[12]=tempoption;'); cityareacode[11]=new Array('1201','1202','1203','1204','1205','1206','1207','1208','1209','1210','1211','1212','1213'); cityareaname[11]=new Array('哈爾濱','齊齊哈爾','牡丹江','佳木斯','大慶','伊春','黑河','雞西','鶴崗','雙鴨山','七臺(tái)河','綏化','大興安嶺'); if (selectP=='13') { a=13;tempoption=new Option('江蘇','13',false,true); } else { tempoption=new Option('江蘇','13'); } eval('document.'+formname+'.'+preP+'.options[13]=tempoption;'); cityareacode[12]=new Array('1301','1302','1303','1304','1305','1306','1307','1308','1309','1310','1311','1312','1313'); cityareaname[12]=new Array('南京','蘇州','無錫','常州','鎮(zhèn)江','連云港 ','揚(yáng)州','徐州 ','南通','鹽城','淮陰','泰州','宿遷'); if (selectP=='14') { a=14;tempoption=new Option('浙江','14',false,true); } else { tempoption=new Option('浙江','14'); } eval('document.'+formname+'.'+preP+'.options[14]=tempoption;'); cityareacode[13]=new Array('1401','1402','1403','1404','1405','1406','1407','1408','1409','1410','1411'); cityareaname[13]=new Array('杭州','湖州','麗水','溫州','紹興','舟山','嘉興','金華','臺(tái)州','衢州','寧波'); if (selectP=='15') { a=15;tempoption=new Option('安徽','15',false,true); } else { tempoption=new Option('安徽','15'); } eval('document.'+formname+'.'+preP+'.options[15]=tempoption;'); cityareacode[14]=new Array('1501','1502','1503','1504','1505','1506','1507','1508','1509','1510','1511','1512','1513','1514','1515','1516','1517'); cityareaname[14]=new Array('合肥 ','蕪湖 ','蚌埠 ','滁州 ','安慶 ','六安 ','黃山 ','宣城 ','淮南 ','宿州 ','馬鞍山 ','銅陵','淮北 ','阜陽 ','池州 ','巢湖 ','亳州'); if (selectP=='16') { a=16;tempoption=new Option('福建','16',false,true); } else { tempoption=new Option('福建','16'); } eval('document.'+formname+'.'+preP+'.options[16]=tempoption;'); cityareacode[15]=new Array('1601','1602','1603','1604','1605','1606','1607','1608','1609'); cityareaname[15]=new Array('福州 ','廈門 ','泉州 ','漳州 ','龍巖 ','南平 ','寧德 ','莆田 ','三明'); if (selectP=='17') { a=17;tempoption=new Option('江西','17',false,true); } else { tempoption=new Option('江西','17'); } eval('document.'+formname+'.'+preP+'.options[17]=tempoption;'); cityareacode[16]=new Array('1701','1702','1703','1704','1705','1706','1707','1708','1709','1710','1711'); cityareaname[16]=new Array('南昌','景德鎮(zhèn)','九江','萍鄉(xiāng)','新余','鷹潭','贛州','宜春','吉安','上饒','撫州'); if (selectP=='18') { a=18;tempoption=new Option('山東','18',false,true); } else { tempoption=new Option('山東','18'); } eval('document.'+formname+'.'+preP+'.options[18]=tempoption;'); cityareacode[17]=new Array('1801','1802','1803','1804','1805','1806','1807','1808','1809','1810','1811','1812','1813','1814','1815','1816','1817'); cityareaname[17]=new Array('濟(jì)南','青島','淄博','德州','煙臺(tái)','濰坊','濟(jì)寧','泰安','臨沂','菏澤','威海','棗莊','日照','萊蕪','聊城','濱州','東營(yíng)'); if (selectP=='19') { a=19;tempoption=new Option('河南','19',false,true); } else { tempoption=new Option('河南','19'); } eval('document.'+formname+'.'+preP+'.options[19]=tempoption;'); cityareacode[18]=new Array('1901','1902','1903','1904','1905','1906','1907','1908','1909','1910','1911','1912','1913','1914','1915','1916','1917','1918'); cityareaname[18]=new Array('鄭州','開封','洛陽','平頂山','安陽','鶴壁','新鄉(xiāng)','焦作','濮陽','許昌','漯河','三門峽','南陽','商丘','周口','駐馬店','信陽','濟(jì)源'); if (selectP=='20') { a=20;tempoption=new Option('湖北','20',false,true); } else { tempoption=new Option('湖北','20'); } eval('document.'+formname+'.'+preP+'.options[20]=tempoption;'); cityareacode[19]=new Array('2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017'); cityareaname[19]=new Array('武漢','黃石','十堰','荊州','宜昌','襄樊','鄂州','荊門','孝感','黃岡','咸寧','恩施','隨州','仙桃','天門','潛江','神農(nóng)架'); if (selectP=='21') { a=21;tempoption=new Option('湖南','21',false,true); } else { tempoption=new Option('湖南','21'); } eval('document.'+formname+'.'+preP+'.options[21]=tempoption;'); cityareacode[20]=new Array('2101','2102','2103','2104','2105','2106','2107','2108','2109','2110','2111','2112','2113'); cityareaname[20]=new Array('長(zhǎng)沙','株州','湘潭','衡陽','邵陽','岳陽','常德','郴州','益陽','永州','懷化','婁底','湘西 '); if (selectP=='22') { a=22;tempoption=new Option('廣西','22',false,true); } else { tempoption=new Option('廣西','22'); } eval('document.'+formname+'.'+preP+'.options[22]=tempoption;'); cityareacode[21]=new Array('2201','2202','2203','2204','2205','2206','2207','2208','2209','2210','2211','2212'); cityareaname[21]=new Array('南寧','柳州','桂林','梧州','北海','防城港','欽州','貴港','玉林','賀州','百色','河池'); if (selectP=='23') { a=23;tempoption=new Option('海南','23',false,true); } else { tempoption=new Option('海南','23'); } eval('document.'+formname+'.'+preP+'.options[23]=tempoption;'); cityareacode[22]=new Array('2301','2302','2303','2304','2305','2306','2307','2308','2309'); cityareaname[22]=new Array('海口 ','三亞','通什','瓊海','瓊山','文昌','萬寧','東方','儋州'); if (selectP=='24') { a=24;tempoption=new Option('四川','24',false,true); } else { tempoption=new Option('四川','24'); } eval('document.'+formname+'.'+preP+'.options[24]=tempoption;'); cityareacode[23]=new Array('2401','2402','2403','2404','2405','2406','2407','2408','2409','2410','2411','2412','2413','2414','2415','2416','2417','2418','2419','2420'); cityareaname[23]=new Array('成都','自貢','攀枝花','瀘州','德陽','綿陽','廣元','遂寧','內(nèi)江','樂山','南充 ','宜賓','廣安','達(dá)川','巴中','雅安','眉山 ','阿壩 ','甘孜 ','涼山 '); if (selectP=='25') { a=25;tempoption=new Option('貴州','25',false,true); } else { tempoption=new Option('貴州','25'); } eval('document.'+formname+'.'+preP+'.options[25]=tempoption;'); cityareacode[24]=new Array('2501','2502','2503','2504','2505','2506','2507','2508','2509'); cityareaname[24]=new Array('貴陽 ','六盤水','遵義','銅仁','畢節(jié)','安順','黔西南 ','黔東南','黔南'); if (selectP=='26') { a=26;tempoption=new Option('云南','26',false,true); } else { tempoption=new Option('云南','26'); } eval('document.'+formname+'.'+preP+'.options[26]=tempoption;'); cityareacode[25]=new Array('2601','2602','2603','2604','2605','2606','2607','2608','2609','2610','2611','2612','2613','2614','2615','2616','2617'); cityareaname[25]=new Array('昆明','東川','曲靖','玉溪','昭通','思茅','臨滄','保山','麗江','文山 ','紅河 ','西雙版納 ','楚雄 ','大理 ','德宏 ','怒江','迪慶'); if (selectP=='27') { a=27;tempoption=new Option('西藏','27',false,true); } else { tempoption=new Option('西藏','27'); } eval('document.'+formname+'.'+preP+'.options[27]=tempoption;'); cityareacode[26]=new Array('2701','2702','2703','2704','2705','2706','2707'); cityareaname[26]=new Array('拉薩','那曲','昌都','山南','日喀則','阿里','林芝'); if (selectP=='28') { a=28;tempoption=new Option('陜西','28',false,true); } else { tempoption=new Option('陜西','28'); } eval('document.'+formname+'.'+preP+'.options[28]=tempoption;'); cityareacode[27]=new Array('2801','2802','2803','2804','2805','2806','2807','2808','2809','2810'); cityareaname[27]=new Array('西安','銅川','寶雞','咸陽','渭南','延安','漢中','榆林','商洛','安康'); if (selectP=='29') { a=29;tempoption=new Option('甘肅','29',false,true); } else { tempoption=new Option('甘肅','29'); } eval('document.'+formname+'.'+preP+'.options[29]=tempoption;'); cityareacode[28]=new Array('2901','2902','2903','2904','2905','2906','2907','2908','2909','2910','2911','2912','2913','2914'); cityareaname[28]=new Array('蘭州','金昌','白銀','天水','嘉峪關(guān)','定西','平?jīng)?,'慶陽','隴南','武威','張掖','酒泉','甘南 ','臨夏'); if (selectP=='30') { a=30;tempoption=new Option('青海','30',false,true); } else { tempoption=new Option('青海','30'); } eval('document.'+formname+'.'+preP+'.options[30]=tempoption;'); cityareacode[29]=new Array('3001','3002','3003','3004','3005','3006','3007','3008'); cityareaname[29]=new Array('西寧','海東',' 海北 ','黃南','海南','果洛','玉樹','海西'); if (selectP=='31') { a=31;tempoption=new Option('寧夏','31',false,true); } else { tempoption=new Option('寧夏','31'); } eval('document.'+formname+'.'+preP+'.options[31]=tempoption;'); cityareacode[30]=new Array('3101','3102','3103','3104'); cityareaname[30]=new Array('銀川','石嘴山','銀南','固原'); if (selectP=='32') { a=32;tempoption=new Option('新疆','32',false,true); } else { tempoption=new Option('新疆','32'); } eval('document.'+formname+'.'+preP+'.options[32]=tempoption;'); cityareacode[31]=new Array('3201','3202','3203','3204','3205','3206','3207','3208','3209','3210','3211','3212','3213'); cityareaname[31]=new Array('烏魯木齊','克拉瑪依','石河子','吐魯番','哈密','和田','阿克蘇','喀什','克孜勒蘇','巴音郭楞','昌吉','博爾塔拉','伊犁'); if (selectP=='33') { a=33;tempoption=new Option('香港','33',false,true); } else { tempoption=new Option('香港','33'); } eval('document.'+formname+'.'+preP+'.options[33]=tempoption;'); cityareacode[32]=new Array(); cityareaname[32]=new Array(); if (selectP=='34') { a=34;tempoption=new Option('澳門','34',false,true); } else { tempoption=new Option('澳門','34'); } eval('document.'+formname+'.'+preP+'.options[34]=tempoption;'); cityareacode[33]=new Array(); cityareaname[33]=new Array(); if (selectP=='35') { a=35;tempoption=new Option('臺(tái)灣','35',false,true); } else { tempoption=new Option('臺(tái)灣','35'); } eval('document.'+formname+'.'+preP+'.options[35]=tempoption;'); cityareacode[34]=new Array(); cityareaname[34]=new Array(); eval('document.'+formname+'.'+preP+'.options[a].selected=true;'); cityid=selectP; if (cityid!='0') { b=0;for (i=0;i<cityareaname[cityid-1].length;i++) { if (selectC==cityareacode[cityid-1][i]) {b=i+1;tempoption=new Option(cityareaname[cityid-1][i],cityareacode[cityid-1][i],false,true);} else tempoption=new Option(cityareaname[cityid-1][i],cityareacode[cityid-1][i]); eval('document.'+formname+'.'+preC+'.options[i+1]=tempoption;'); } eval('document.'+formname+'.'+preC+'.options[b].selected=true;'); } } function selectcityarea(preP,preC,formname) { cityid=eval('document.'+formname+'.'+preP+'.selectedIndex;'); j=eval('document.'+formname+'.'+preC+'.length;'); for (i=1;i<j;i++) {eval('document.'+formname+'.'+preC+'.options[j-i]=null;')} if (cityid!="0") { for (i=0;i<cityareaname[cityid-1].length;i++) { tempoption=new Option(cityareaname[cityid-1][i],cityareacode[cityid-1][i]); eval('document.'+formname+'.'+preC+'.options[i+1]=tempoption;'); } } } </script> <form action="" method=post name=form1> <img src="images/w_KT.gif" height="6" width="1"><br> <table width=300 border=0 cellspacing="0" cellpadding="1" !bgcolor=#FFFDE6> <tr> <td class="black_con9" align="right">省份:</td> <td class="black_con9"> <select name="selectp" onChange="selectcityarea('selectp','selectc','form1');"> <option value="0" selected>不限-- </select> </td> </tr> <tr> <td class="black_con9" align="right">縣/市:</td> <td class="black_con9"> <select name="selectc"> <option value="0" selected>不限-- </select> </td> </tr> </table> </form> <script language="javascript"> first("selectp","selectc","form1",0,0); </script> </body> </html>
希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。
- JavaScript 下拉菜單實(shí)現(xiàn)代碼
- css+js下拉菜單
- js動(dòng)態(tài)設(shè)置select下拉菜單的默認(rèn)選中項(xiàng)實(shí)例
- 三級(jí)下拉菜單的js實(shí)現(xiàn)代碼
- 一個(gè)日期下拉菜單的js實(shí)現(xiàn)代碼
- JS實(shí)多級(jí)聯(lián)動(dòng)下拉菜單類,簡(jiǎn)單實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)菜單!
- Js點(diǎn)擊彈出下拉菜單效果實(shí)例
- JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏
- JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單
- javascript實(shí)現(xiàn)簡(jiǎn)單下拉菜單效果
相關(guān)文章
通過JS判斷聯(lián)網(wǎng)類型和連接狀態(tài)的實(shí)現(xiàn)代碼
這篇文章主要介紹了通過JS判斷聯(lián)網(wǎng)類型和連接狀態(tài)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-04-04javascript如何計(jì)算數(shù)組中某值的出現(xiàn)次數(shù)
這篇文章主要介紹了javascript如何計(jì)算數(shù)組中某值的出現(xiàn)次數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01window.event.keyCode兼容IE和Firefox實(shí)現(xiàn)js代碼
window.event.keyCode兼容IE和Firefox具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下哈2013-05-05JS實(shí)現(xiàn)中國(guó)公民身份證號(hào)碼有效性驗(yàn)證
這篇文章主要介紹了JS實(shí)現(xiàn)中國(guó)公民身份證號(hào)碼有效性驗(yàn)證,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02js獲取元素到文檔區(qū)域document的(橫向、縱向)坐標(biāo)的兩種方法
獲取頁面中元素到文檔區(qū)域document的橫向、縱向坐標(biāo),在js控制元素運(yùn)動(dòng)的過程中,對(duì)于頁面元素坐標(biāo)位置的獲取是經(jīng)常用到的,這里主要總結(jié)下兩種方法2013-05-05Atitit.js的鍵盤按鍵事件捆綁and事件調(diào)度
這篇文章主要介紹了Atitit.js的鍵盤按鍵事件捆綁and事件調(diào)度的相關(guān)資料,需要的朋友可以參考下2016-04-04收集的一些Array及String原型對(duì)象的擴(kuò)展實(shí)現(xiàn)代碼
收集的一些Array及String原型對(duì)象的擴(kuò)展實(shí)現(xiàn)代碼,學(xué)習(xí)js的朋友可以參考下。并可以自定義的對(duì)字符串與array數(shù)據(jù),進(jìn)行擴(kuò)展。2010-12-12使用JavaScript實(shí)現(xiàn)一個(gè)交互式音樂播放器
JavaScript,作為前端開發(fā)的重要語言,可以實(shí)現(xiàn)許多復(fù)雜的功能,在這篇文章中,我們將一起創(chuàng)建一個(gè)交互式的音樂播放器,快跟隨小編一起學(xué)習(xí)一下吧2024-01-01