JavaScript二維數組實現的省市聯動菜單

2019-11-20 20:43:17

字體：大中小

來源：轉載

供稿：網友

 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript"> 
//初始化一個二維數組存儲城市列表項 
var cities=[ 
["安慶","合肥","桐城"], 
["石家莊","保定","唐山"], 
["鄭州","洛陽","開封"] 
]; 
//選中某個省份時候，調用添加城市的方法 
function provinceChanged(sel){ 
//alert("select的長度"+sel.options.length); 
//sel其實就是select對象 
//遍歷options集合，查找選中的選項 
for(var x=0;x<sel.options.length;x++) 
{ 
var opt=sel.options[x]; 
if(opt.selected) 
{ 
//給被選擇的城市的select 添加option 
addCityToSelect(x) 
} 
} 
} 
//添加選中省份下的城市項到city的select中 
function addCityToSelect(x){ 
//從二維數組中找出對應的城市 
var city=cities[x-1]; 
var citySelect=document.getElementById("select_city"); 
/*==================刪除節點中已經存在的元素=============== 
在第二次或第n次調用方法的時候城市select對象中已經添加了之前添加的節點，所以有清空。 
思路1：select對象的removeChild(),所以通過循環遍歷可以刪除字節點。 
思路2：直接設置select.options.length=1可以實現相同效果。 
*/ 
//設置城市的select對象下的options長度為1 
citySelect.options.length=1; 
//設置options集合的長度，刪除 
//citySelect.options.length=1; 
for(var x=0;x<city.length;x++) 
{ 
//創建元素節點對象 
var optionName=document.createElement("option"); 
//給option設置顯示內容 
optionName.innerHTML=city[x]; 
//將創建的option添加到select 
citySelect.appendChild(optionName); 
/* 
在這個地方將某一個省份下面的所有城市添加到citySelect對象下面以后 
當第二次選擇第二個省份的時候，第二個省份的下面的所有城市有會被追加到 
citySelect節點下面。這樣的效果就錯了。所以要求在每次添加之前，要 
對citySelect節點下面的內容進行清空。接著看： 
==================刪除節點中已經存在的元素=============== 
*/ 
} 
} 
</script> 
</head> 
<body> 
<select onchange="provinceChanged(this);"> 
<!--this的含義：是指select對象調用provinceChanged(this),并且在此方法中 
把對象本身作為參數傳遞，以便對其進行操作。 --> 
<option>請選擇省份</option> 
<option>安徽</option> 
<option>河北</option> 
<option>河南</option> 
</select> 
<select id="select_city"> 
<option>請選擇城市</option> 
</select> 
</body> 
</html> 