<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二級聯(lián)動(dòng)下拉框</title>
<!--
data:
"北京市": ["海淀區","朝陽(yáng)區","豐臺區"]
"河北省": ["石家莊","唐山","秦皇島"]
"遼寧省": ["沈陽(yáng)","大連","鞍山"]
"山東省": ["青島","濟南","煙臺"]
-->
<!--引入jquery的js庫-->
<script src="js/jquery-1.4.2.js"></script>
<script>
var data = {
"北京市": ["海淀區","朝陽(yáng)區","豐臺區"],
"河北省": ["石家莊","唐山","秦皇島"],
"遼寧省": ["沈陽(yáng)","大連","鞍山"],
"山東省": ["青島","濟南","煙臺"]
}
/* --通過(guò)jQuery實(shí)現二級聯(lián)動(dòng)下拉框
function selectCity(thisobj){
var prov = $(thisobj).val();//獲取用戶(hù)選中的省份
var citys = data[prov];//再根據省份獲取對應的市區
$("#city").html("<option>--選擇城市--</option>");//清空之前的數據
for(var i=0; i<citys.length; i++){
$("#city").append("<option>"+[citys[i]]+"</option>");
}
}-- */
/* --通過(guò)js實(shí)現二級聯(lián)動(dòng)下拉框-- */
/* 練習1 */
function getCountry(){
//獲取select元素
var oSelect = document.getElementsByName("country")[0];
alert(oSelect.value);
}
/* 練習2 */
function selectCity(thisobj){
//1.獲取用戶(hù)選中的省份
var prov = thisobj.value;
//2.根據省份獲取該省份下所有的城市列表 北京市
var arrCity = data[prov];
//alert(arrCity);
//3.將該省份下所有的城市 作為option選項填充到第二個(gè)select列表中
//>>獲取第二個(gè)select
var oCity = document.getElementById("city");
//>>先清空上個(gè)省份對應的城市列表
//方式一
//oCity.innerHTML = "<option>--選擇城市--</option>";
//方式二 JS中的數組的特點(diǎn)
var opts = oCity.getElementsByTagName("option");
//循環(huán)遍歷, 挨個(gè)刪除每一個(gè)option
var len = opts.length;
for(var i=0; i<len-1; i++){
oCity.removeChild(opts[1]);
}
//海淀區 --> <option>海淀區</option>
for(var i = 0; i<arrCity.length; i++){
var oOpt = document.createElement("option");
oOpt.innerHTML = arrCity[i];
oCity.appendChild(oOpt);
}
}
</script>
<!--
1.讓用戶(hù)先選擇一個(gè)省份, 獲取用戶(hù)選中的省份 北京市
2.根據用戶(hù)選中的省份, 獲知省份下面的所有城市(數組)
3.將該省份下面的所有城市 作為option選項 填充到第二個(gè)select列表(城市)中
-->
<!--
js實(shí)現注意問(wèn)題:
ie10以下的瀏覽器不支持 select,table上的innerHTML屬性
刪除option時(shí)，由于刪除后，options長(cháng)度發(fā)生了變化，所以直接用for循環(huán)會(huì )有漏刪的情況，可以由后向前刪除，可以避免這樣的問(wèn)題
-->
</head>
<body>
<select name="country" onchange="getCountry()" >
<option value="none">--選擇國家--</option>
<option value="中國">中國</option>
<option value="美國">美國</option>
<option value="日本">日本</option>
</select>
<br><br>
<hr/>
<br>
<select id="province" onchange="selectCity(this)">
<option>--選擇省市--</option>
<option>北京市</option>
<option>河北省</option>
<option>遼寧省</option>
<option>山東省</option>
</select>
<select id="city">
<option>--選擇城市--</option>
</select>
</div>
</body>
</html>
