JavaScript二級聯動

阿新 • • 發佈：2017-06-19

-name 位置城市 itl name change line 拉斯維加斯 ()

就是兩個下拉列表框，我假設它有兩個下拉列表(其實還可以有更多)，第一個下拉列表中讓你選擇的省,而另一個下拉列表讓你選擇的是城市,當你在省的下拉列表中的選擇發生改變的時候，城市的下拉列表也應當跟著你所選擇的省名稱而發生改變，這樣就產生了一種聯動的較果也就是簡單的二級聯動。

具體看代碼

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>
	<select id="country">
	<option value="">國家</option>
	</select>

	<select id="city">
	<option value="">城市</option>
	</select>


	<script type="text/javascript">


	var country = [
	["中國", "北京","上海","重慶"],
	["美國","華盛頓","紐約","拉斯維加斯"],
	["日本","東京","橫濱","神戶"]
	]

	//獲取到兩個下拉列表

	var country1 = document.getElementById("country");
	var city1 = document.getElementById("city");
	//把國家名裝到第一個下來框裏面
	function countryTosel(){
	for(var i=0;i<country.length;i++){
	//動態創建option標簽
	var option1 = document.createElement("option");
	option1.innerHTML = country[i][0];//把國家名裝到option裏面
	country1.appendChild(option1);//把option放到第一個下拉列表裏面
	}
	}
	countryTosel();


	//把城市名放到第二個下拉列表裏面
	function cityToSel(index){
	for(var j=1;j<country[index].length;j++){
	var option2 = document.createElement("option");
	option2.innerHTML = country[index][j];//把城市名裝到option裏面
	city1.appendChild(option2);//把option放到第二個下拉列表裏面

	}
	}
	//cityToSel(1);

	country1.onchange = function(){
	//selectedIndex,下拉列表的option對應的位置
	//alert(this.selectedIndex);
	city1.innerHTML = "<option value=‘‘>城市</option>";
	if(this.selectedIndex!=0){
	cityToSel(this.selectedIndex-1)
	}
	}
	</script>
	</body>
	</html>

JavaScript二級聯動

-name 位置城市 itl name change line 拉斯維加斯 () 就是兩個下拉列表框，我假設它有兩個下拉列表(其實還可以有更多)，第一個下拉列表中讓你選擇的省,而另一個下拉列表讓你選擇的是城市,當你在省的下拉列表中的選擇發生改變的時候，城市的下拉列表也應