複製代碼代碼如下:
<!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>