1. 程式人生 > >JS實現省市聯動

JS實現省市聯動

不說多了,直接上程式碼,實現省市二級聯動

思路是:點選省份下拉時,觸發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>