<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动下拉框</title>
<!--
data:
"北京市": ["海淀区","朝阳区","丰台区"]
"河北省": ["石家庄","唐山","秦皇岛"]
"辽宁省": ["沈阳","大连","鞍山"]
"山东省": ["青岛","济南","烟台"]
-->
<!--引入jquery的js库-->
<script src="js/jquery-1.4.2.js"></script>
<script>
var data = {
"北京市": ["海淀区","朝阳区","丰台区"],
"河北省": ["石家庄","唐山","秦皇岛"],
"辽宁省": ["沈阳","大连","鞍山"],
"山东省": ["青岛","济南","烟台"]
}
/* --通过jQuery实现二级联动下拉框
function selectCity(thisobj){
var prov = $(thisobj).val();//获取用户选中的省份
var citys = data[prov];//再根据省份获取对应的市区
$("#city").html("<option>--选择城市--</option>");//清空之前的数据
for(var i=0; i<citys.length; i++){
$("#city").append("<option>"+[citys[i]]+"</option>");
}
}-- */
/* --通过js实现二级联动下拉框-- */
/* 练习1 */
function getCountry(){
//获取select元素
var oSelect = document.getElementsByName("country")[0];
alert(oSelect.value);
}
/* 练习2 */
function selectCity(thisobj){
//1.获取用户选中的省份
var prov = thisobj.value;
//2.根据省份获取该省份下所有的城市列表 北京市
var arrCity = data[prov];
//alert(arrCity);
//3.将该省份下所有的城市 作为option选项填充到第二个select列表中
//>>获取第二个select
var oCity = document.getElementById("city");
//>>先清空上个省份对应的城市列表
//方式一
//oCity.innerHTML = "<option>--选择城市--</option>";
//方式二 JS中的数组的特点
var opts = oCity.getElementsByTagName("option");
//循环遍历, 挨个删除每一个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.让用户先选择一个省份, 获取用户选中的省份 北京市
2.根据用户选中的省份, 获知省份下面的所有城市(数组)
3.将该省份下面的所有城市 作为option选项 填充到第二个select列表(城市)中
-->
<!--
js实现注意问题:
ie10以下的浏览器不支持 select,table上的innerHTML属性
删除option时,由于删除后,options长度发生了变化,所以直接用for循环会有漏删的情况,可以由后向前删除,可以避免这样的问题
-->
</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>
<div id="seleDiv">
<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>