JS實現省市聯動
阿新 • • 發佈：2019-02-10
不說多了，直接上程式碼，實現省市二級聯動
思路是：點選省份下拉時，觸發getCity()函式，遍歷陣列來獲取市的值
javascript程式碼：
var city=[ [], [], ["石家莊","唐山","秦皇島","邯鄲","邢臺","保定","張家口","承德","滄州","廊坊","衡水"], ["太原","大同","陽泉","長治","晉城","朔州","晉中","運城","忻州","臨汾","呂梁"], ["呼和浩特","包頭","烏海","赤峰","通遼","鄂爾多斯","呼倫貝爾","巴彥淖爾","烏蘭察布","興安","錫林郭勒","阿拉善"], ["瀋陽","大連","鞍山","撫順","本溪","丹東","錦州","營口","阜新","遼陽","盤錦","鐵嶺","朝陽","葫蘆島"], ["長春","吉林","四平","遼源","通化","白山","松原","白城","延邊"], ["哈爾濱","齊齊哈爾","雞西","鶴崗","雙鴨山","大慶","伊春","佳木斯","七臺河","牡丹江","黑河","綏化","大興安嶺"], [], ["南京","無錫","徐州","常州","蘇州","南通","連雲港","淮安","鹽城","揚州","鎮江","泰州","宿遷"], ["杭州","寧波","溫州","嘉興","湖州","紹興","金華","衢州","舟山","台州","麗水"], ["合肥","蕪湖","蚌埠","淮南","馬鞍山","淮北","銅陵","安慶","黃山","滁州","阜陽","宿州","巢湖","六安","亳州","池州","宣城"], ["福州","廈門","莆田","三明","泉州","漳州","南平","龍巖","寧德"], ["南昌","景德鎮","萍鄉","九江","新餘","鷹潭","贛州","吉安","宜春","撫州","上饒"], ["濟南","青島","淄博","棗莊","東營","煙臺","濰坊","濟寧","泰安","威海","日照","萊蕪","臨沂","德州","聊城","濱州","菏澤"], ["鄭州","開封","洛陽","平頂山","安陽","鶴壁","新鄉","焦作","濮陽","許昌","漯河","三門峽","南陽","商丘","信陽","周口","駐馬店","濟源"], ["武漢","黃石","十堰","宜昌","襄陽","鄂州","荊門","孝感","荊州","黃岡","咸寧","隨州","恩施","省直轄"], ["長沙","株洲","湘潭","衡陽","邵陽","岳陽","常德","張家界","益陽","郴州","永州","懷化","婁底","湘西"], ["廣州","韶關","深圳","珠海","汕頭","佛山","江門","湛江","茂名","肇慶","惠州","梅州","汕尾","河源","陽江","清遠", "東莞","中山","潮州","揭陽","雲浮"], ["南寧","柳州","桂林","梧州","北海","防城港","欽州","貴港","玉林","百色","賀州","河池","來賓","崇左"], ["海口","三亞","萬寧","三沙","儋州","五指山","文昌","瓊海","東方","定安","屯昌","澄邁","臨高","白沙","昌江","樂東","陵水","保亭","瓊中","洋浦"], [], ["成都","自貢","攀枝花","瀘州","德陽","綿陽","廣元","遂寧","內江","樂山","南充","眉山","宜賓","廣安","達州","雅安","巴中","資陽","阿壩", "甘孜","涼山"], ["貴陽","六盤水","遵義","安順","銅仁","黔西南","畢節","黔東南","黔南"], ["昆明","曲靖","玉溪","保山","邵通","麗江","普洱","臨滄","楚雄","紅河","文山","西雙版納","大理","德巨集","怒江傈","迪慶"], ["拉薩","昌都","山南","日喀則","那曲","阿里","林芝"], ["西安","銅川","寶雞","咸陽","渭南","延安","漢中","榆林","安康","商洛"], ["蘭州","嘉峪關","金昌","白銀","天水","武威","張掖","平涼","酒泉","慶陽","定西","隴南","臨夏","甘南"], ["西寧","海東","海北","黃南","海南自治區","果洛","玉樹","海西"], ["銀川","石嘴山","吳忠","固原","中衛"], ["烏魯木齊","克拉瑪依","吐魯番","哈密","昌吉","博爾塔拉","巴音郭楞","阿克蘇","克孜勒蘇柯爾","喀什","和田","伊犁","塔城", "阿勒泰","石河子"], ["新北","臺北","臺中","臺南","高雄","花蓮","墾丁","金門","宜蘭"], [], [], [], [], ["曼谷","芭提雅","清邁","甲米島","普吉島","蘇梅島"], ["吉隆坡","亞庇","仙本那"], [], [], ["馬尼拉","長灘島"], ["首爾","濟州島"], ["東京","京都","大阪"], [], ["巴厘島"] ]; function getcity(){ var sltProvince = document.getElementById("province"); var sltCity = document.getElementById("city"); var provinceCity = city[sltProvince.selectedIndex - 2]; sltCity.length = 1; for ( i = 0 ; i < provinceCity.length ; i++ ) { sltCity[i + 1] = new Option(provinceCity[i], provinceCity[i]); } }
html程式碼（bootstrap）
<div class="col-md-2" style="width:auto;margin-right:-40px"> <div class="form-group"> <label class="control-label col-md-5" style="width:auto">相關省份</label> <div class="col-md-7"> <select id="province" class="form-control" onChange="getcity()"> <option value="-1" selected>QB-全部</option> <option value="全國">QG-全國</option> <option value="北京">北京市</option> <option value="天津">天津市</option> <option value="河北">河北省</option> <option value="山西">山西省</option> <option value="內蒙古">內蒙古自治區</option> <option value="遼寧">遼寧省</option> <option value="吉林">吉林省</option> <option value="黑龍江">黑龍江省</option> <option value="上海">上海市</option> <option value="江蘇">江蘇省</option> <option value="浙江">浙江省</option> <option value="安徽">安徽省</option> <option value="福建">福建省</option> <option value="江西">江西省</option> <option value="山東">山東省</option> <option value="河南">河南省</option> <option value="湖北">湖北省</option> <option value="湖南">湖南省</option> <option value="廣東">廣東省</option> <option value="廣西">廣西壯族自治區</option> <option value="海南">海南省</option> <option value="重慶">重慶市</option> <option value="四川">四川省</option> <option value="貴州">貴州省</option> <option value="雲南">雲南省</option> <option value="西藏">西藏自治區</option> <option value="陝西">陝西省</option> <option value="甘肅">甘肅省</option> <option value="青海">青海省</option> <option value="寧夏">寧夏回族自治區</option> <option value="新疆">新疆維吾爾自治區</option> <option value="臺灣">臺灣</option> <option value="香港">香港</option> <option value="澳門">澳門</option> <option value="馬爾地夫">馬爾地夫</option> <option value="塞席爾">塞席爾</option> <option value="泰國">泰國</option> <option value="馬來西亞">馬來西亞</option> <option value="新加坡">新加坡</option> <option value="模里西斯">模里西斯</option> <option value="菲律賓">菲律賓</option> <option value="韓國">韓國</option> <option value="日本">日本</option> <option value="越南">越南</option> <option value="印尼">印尼</option> </select> </div> </div> </div> <div class="col-md-2" style="width:300px;margin-right:-70px"> <div class="form-group"> <label class="control-label col-md-5" style="width:auto">相關城市</label> <div class="col-md-6"> <select id="city" class="form-control"> <!-- option value="0" selected>不限</option--> <option value="-1">不限</option> </select> </div> </div> </div>
以上程式碼在實現查詢和新增功能的時候可用，如編輯功能則需要做一點改動，
思路是：頁面載入時就onload獲取市的getCity()函式，使進入編輯頁面時就可以選擇市一級，同時市下拉通過EL表示式獲取值，在getCity()中new option的時候判斷和EL表示式獲取值相同的那個option設為default select和selected
程式碼如下：
js：
function getcity(){ var sltProvince = document.getElementById("province"); var sltCity = document.getElementById("city"); var provinceCity = city[sltProvince.selectedIndex - 2]; sltCity.length = 1; var citysel = "${guessVo.recAreaCity}"; for ( i = 0 ; i < provinceCity.length ; i++ ) { if(provinceCity[i] == citysel){ sltCity[i + 1] = new Option(provinceCity[i], provinceCity[i],true,true); }else{ sltCity[i + 1] = new Option(provinceCity[i], provinceCity[i]); } }
html：
<body onload="getcity()"><div class="form-group">
<label class="col-md-3 control-label">推薦省份：</label>
<div class="col-md-4">
<select id="province" class="form-control" onChange="getcity()">
<option value=" " <c:if test="${mode=='new' || guessVo.recAreaProvince=='-1'}">selected</c:if>>請選擇省份</option>
<option value="全國" <c:if test="${guessVo.recAreaProvince=='全國'}">selected</c:if>>QG-全國</option>
<option value="北京" <c:if test="${guessVo.recAreaProvince=='北京'}">selected</c:if>>北京市</option>
<option value="天津" <c:if test="${guessVo.recAreaProvince=='天津'}">selected</c:if>>天津市</option>
<option value="河北" <c:if test="${guessVo.recAreaProvince=='河北'}">selected</c:if>>河北省</option>
<option value="山西" <c:if test="${guessVo.recAreaProvince=='山西'}">selected</c:if>>山西省</option>
<option value="內蒙古" <c:if test="${guessVo.recAreaProvince=='內蒙古'}">selected</c:if>>內蒙古自治區</option>
<option value="遼寧" <c:if test="${guessVo.recAreaProvince=='遼寧'}">selected</c:if>>遼寧省</option>
<option value="吉林" <c:if test="${guessVo.recAreaProvince=='吉林'}">selected</c:if>>吉林省</option>
<option value="黑龍江" <c:if test="${guessVo.recAreaProvince=='黑龍江'}">selected</c:if>>黑龍江省</option>
<option value="上海" <c:if test="${guessVo.recAreaProvince=='上海'}">selected</c:if>>上海市</option>
<option value="江蘇" <c:if test="${guessVo.recAreaProvince=='江蘇'}">selected</c:if>>江蘇省</option>
<option value="浙江" <c:if test="${guessVo.recAreaProvince=='浙江'}">selected</c:if>>浙江省</option>
<option value="安徽" <c:if test="${guessVo.recAreaProvince=='安徽'}">selected</c:if>>安徽省</option>
<option value="福建" <c:if test="${guessVo.recAreaProvince=='福建'}">selected</c:if>>福建省</option>
<option value="江西" <c:if test="${guessVo.recAreaProvince=='江西'}">selected</c:if>>江西省</option>
<option value="山東" <c:if test="${guessVo.recAreaProvince=='山東'}">selected</c:if>>山東省</option>
<option value="河南" <c:if test="${guessVo.recAreaProvince=='河南'}">selected</c:if>>河南省</option>
<option value="湖北" <c:if test="${guessVo.recAreaProvince=='湖北'}">selected</c:if>>湖北省</option>
<option value="湖南" <c:if test="${guessVo.recAreaProvince=='湖南'}">selected</c:if>>湖南省</option>
<option value="廣東" <c:if test="${guessVo.recAreaProvince=='廣東'}">selected</c:if>>廣東省</option>
<option value="廣西" <c:if test="${guessVo.recAreaProvince=='廣西'}">selected</c:if>>廣西壯族自治區</option>
<option value="海南" <c:if test="${guessVo.recAreaProvince=='海南'}">selected</c:if>>海南省</option>
<option value="重慶" <c:if test="${guessVo.recAreaProvince=='重慶'}">selected</c:if>>重慶市</option>
<option value="四川" <c:if test="${guessVo.recAreaProvince=='四川'}">selected</c:if>>四川省</option>
<option value="貴州" <c:if test="${guessVo.recAreaProvince=='貴州'}">selected</c:if>>貴州省</option>
<option value="雲南" <c:if test="${guessVo.recAreaProvince=='雲南'}">selected</c:if>>雲南省</option>
<option value="西藏" <c:if test="${guessVo.recAreaProvince=='西藏'}">selected</c:if>>西藏自治區</option>
<option value="陝西" <c:if test="${guessVo.recAreaProvince=='陝西'}">selected</c:if>>陝西省</option>
<option value="甘肅" <c:if test="${guessVo.recAreaProvince=='甘肅'}">selected</c:if>>甘肅省</option>
<option value="青海" <c:if test="${guessVo.recAreaProvince=='青海'}">selected</c:if>>青海省</option>
<option value="寧夏" <c:if test="${guessVo.recAreaProvince=='寧夏'}">selected</c:if>>寧夏回族自治區</option>
<option value="新疆" <c:if test="${guessVo.recAreaProvince=='新疆'}">selected</c:if>>新疆維吾爾自治區</option>
<option value="臺灣" <c:if test="${guessVo.recAreaProvince=='臺灣'}">selected</c:if>>臺灣</option>
<option value="香港" <c:if test="${guessVo.recAreaProvince=='香港'}">selected</c:if>>香港</option>
<option value="澳門" <c:if test="${guessVo.recAreaProvince=='澳門'}">selected</c:if>>澳門</option>
<option value="馬爾地夫" <c:if test="${guessVo.recAreaProvince=='馬爾地夫'}">selected</c:if>>馬爾地夫</option>
<option value="塞席爾" <c:if test="${guessVo.recAreaProvince=='塞席爾'}">selected</c:if>>塞席爾</option>
<option value="泰國" <c:if test="${guessVo.recAreaProvince=='泰國'}">selected</c:if>>泰國</option>
<option value="馬來西亞" <c:if test="${guessVo.recAreaProvince=='馬來西亞'}">selected</c:if>>馬來西亞</option>
<option value="新加坡" <c:if test="${guessVo.recAreaProvince=='新加坡'}">selected</c:if>>新加坡</option>
<option value="模里西斯" <c:if test="${guessVo.recAreaProvince=='模里西斯'}">selected</c:if>>模里西斯</option>
<option value="菲律賓" <c:if test="${guessVo.recAreaProvince=='菲律賓'}">selected</c:if>>菲律賓</option>
<option value="韓國" <c:if test="${guessVo.recAreaProvince=='韓國'}">selected</c:if>>韓國</option>
<option value="日本" <c:if test="${guessVo.recAreaProvince=='日本'}">selected</c:if>>日本</option>
<option value="越南" <c:if test="${guessVo.recAreaProvince=='越南'}">selected</c:if>>越南</option>
<option value="印尼" <c:if test="${guessVo.recAreaProvince=='印尼'}">selected</c:if>>印尼</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">推薦城市：</label>
<div class="col-md-4">
<select id="city" class="form-control">
<option value=" " <c:if test="${mode=='new' || guessVo.recAreaCity==' '}">selected</c:if>>不限</option>
<c:if test="${mode=='edit' && guessVo.recAreaCity != ' '}">
<span style="white-space:pre"> </span><option value="${guessVo.recAreaCity}" <c:if test="${mode=='edit' && guessVo.recAreaCity != ' '}">selected</c:if>>${guessVo.recAreaCity}</option>
</c:if>
</select>
</div>
</div>