代碼實例：以下代碼可以直接粘貼使用，但里面的城市并不完整。
實現原理是利用 js的onchang方法，調用city.js文件里的changecity()函數，var text = city[index][i].split(“-”); 這個方法是把new Array()數組拆分進text變量數組里，然后text[0]是文本區域中的值，text[1]是選中的值。

1 <script type="text/javascript" src=”city.js”></script> 2 3 <form action=”" method=”post” name=”form2″>省份：<select name=”sf” onchange=”changecity()” > 4 <option selected>選擇省份</option> 5 <option value=”江蘇省”>江蘇省</option> 6 <option value=”北京”>北京</option> 7 <option value=”天津”>天津</option> 8 <option value=”上海”>上海</option> 9 <option value=”重慶”>重慶</option> 10 <option value=”廣東省”>廣東省</option> 11 <option value=”浙江省”>浙江省</option> 12 <option value=”福建省”>福建省</option></select> 13 　城市： 14 <SELECT name=city style=”width:80″> 15 <OPTION>==所在城市==</OPTION> 16 </SELECT> 17 </form>

city.js 代碼：

1 // JavaScript Document 2 function changecity(){ 3 index = form2.sf.options.selectedIndex-1; 4 form2.city.length = city[index].length; 5 for(var i = 0;i<city[index].length;i++) 6 { 7 var text = city[index][i].split(“-”); 8 form2.city.options[i].text = text[0]; 9 form2.city.options[i].value =text[1]; 10 } 11 }var city = new Array( 12 new Array( 13 //”江蘇省(全部地區）-江蘇省(全部地區）”, 14 “江陰市-江陰市”, 15 “無錫市-無錫市”, 16 “宜興市-宜興市”, 17 “常州市-常州市”, 18 “南京市-南京市”, 19 “溧水縣-溧水縣”, 20 “高淳縣-高淳縣”, 21 “蘇州市-蘇州市”, 22 “常熟市-常熟市”, 23 “張家港市-張家港市”, 24 “昆山市-昆山市”, 25 “吳江市-吳江市”, 26 “太倉市-太倉市”, 27 “溧陽市-溧陽市”, 28 “金壇市-金壇市”, 29 “南通市-南通市”, 30 “海安縣-海安縣”, 31 “如東縣-如東縣”, 32 “啟東市-啟東市”, 33 “如皋市-如皋市”, 34 “通州市-通州市”, 35 “海門市-海門市”, 36 “鎮江市-鎮江市”, 37 “丹陽市-丹陽市”, 38 “揚中市-揚中市”, 39 “句容市-句容市”, 40 “徐州市-徐州市”, 41 “豐縣-豐縣”, 42 “沛縣-沛縣”, 43 “銅山縣-銅山縣”, 44 “睢寧縣-睢寧縣”, 45 “新沂市-新沂市”, 46 “邳州市-邳州市”, 47 “連云港市-連云港市”, 48 “贛榆縣-贛榆縣”, 49 “東海縣-東海縣”, 50 “灌云縣-灌云縣”, 51 “淮安市-淮安市”, 52 “漣水縣-漣水縣”, 53 “洪澤縣-洪澤縣”, 54 “盱眙縣-盱眙縣”, 55 “金湖縣-金湖縣”, 56 “鹽城市-鹽城市”, 57 “響水縣-響水縣”, 58 “濱海縣-濱海縣”, 59 “阜寧縣-阜寧縣”, 60 “射陽縣-射陽縣”, 61 “建湖縣-建湖縣”, 62 “鹽都縣-鹽都縣”, 63 “東臺縣-東臺縣”, 64 “大豐市-大豐市”, 65 “揚州市-揚州市”, 66 “寶應縣-寶應縣”, 67 “儀征縣-儀征縣”, 68 “高郵市-高郵市”, 69 “江都市-江都市”, 70 “宿遷市-宿遷市”, 71 “宿豫縣-宿豫縣”, 72 “沭陽縣-沭陽縣”, 73 “泗陽縣-泗陽縣”, 74 “泗洪縣-泗洪縣”, 75 “泰州市-泰州市”, 76 “興化市-興化市”, 77 “靖江市-靖江市”, 78 “泰興市-泰興市”, 79 “姜堰市-姜堰市”), 80 new Array(“北京-北京”), 81 new Array(“天津-天津”), 82 new Array(“上海-上海”), 83 new Array(“重慶-重慶”), 84 new Array( 85 //”廣東省 (全部地區）-廣東省 (全部地區）”, 86 “廣州-廣州”, 87 “深圳-深圳”, 88 “東莞-東莞”, 89 “中山-中山”, 90 “佛山-佛山”, 91 “珠海-珠海”, 92 “惠州-惠州”, 93 “汕頭-汕頭”, 94 “湛江-湛江”, 95 “潮州-潮州”, 96 “潮陽-潮陽”, 97 “江門-江門”, 98 “汕尾-汕尾”, 99 “茂名-茂名”, 100 “陽江-陽江”, 101 “肇慶-肇慶”, 102 “梅州-梅州”, 103 “云浮-云浮”, 104 “清遠-清遠”, 105 “韶關-韶關”, 106 “河源-河源”, 107 “揭陽-揭陽”, 108 “其他-其他”), 109 new Array( 110 //”浙江省(全部地區）-浙江省(全部地區）”, 111 “杭州-杭州”, 112 “寧波-寧波”, 113 “溫州-溫州”, 114 “金華-金華”, 115 “義烏-義烏”, 116 “紹興-紹興”, 117 “湖州-湖州”, 118 “余姚-余姚”, 119 “臨海-臨海”, 120 “蕭山-蕭山”, 121 “臨安-臨安”, 122 “諸暨-諸暨”, 123 “嵊泗-嵊泗”, 124 “蘭溪-蘭溪”, 125 “嘉興-嘉興”, 126 “海寧-海寧”, 127 “桐鄉-桐鄉”, 128 “衢州-衢州”, 129 “上虞-上虞”, 130 “嵊州-嵊州”, 131 “慈溪-慈溪”, 132 “麗水-麗水”, 133 “甌海-甌海”, 134 “黃巖-黃巖”, 135 “椒江-椒江”, 136 “其他-其他”), 137 new Array( 138 //”福建省(全部地區）-福建省(全部地區）”, 139 “福州-福州”, 140 “廈門-廈門”, 141 “泉州-泉州”, 142 “漳州-漳州”, 143 “石獅-石獅”, 144 “三明-三明”, 145 “南平-南平”, 146 “莆田-莆田”, 147 “永安-永安”, 148 “邵武-邵武”, 149 “龍巖-龍巖”, 150 “其他-其他”));

?

轉載于:https://www.cnblogs.com/leejersey/archive/2012/12/23/2829768.html

總結

以上是生活随笔為你收集整理的js实现城市级联选择，二级选择的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。