<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动下拉框</title>
<script>
/* --通过js实现二级联动下拉框-- */
function getCountry(){
//1.获取select元素
var sele=document.getElementsByName("country")[0];
//2.获取select元素的value值
document.getElementById("result").innerHTML=sele.value;
var img=document.getElementsByTagName("img")[0];
if(sele.value=="日本"){
img.src="img/jp.jpg";
}
else if(sele.value=="中国"){
img.src="img/ch.jpg";
}
else if(sele.value=="美国"){
img.src="img/am.jpg";
}
else{
img.src="";
}
}
var data = {
"北京市": ["海淀区","朝阳区","丰台区"],
"河北省": ["石家庄","唐山","秦皇岛"],
"辽宁省": ["沈阳","大连","鞍山"],
"山东省": ["青岛","济南","烟台"]
}
function selectCity(thisobj){
//1.先获取用户选中的省份
var prov=thisobj.value;
//2.根据省份获取省份对应的城市数据
var citys=data[prov];
//3.遍历数组中的城市，将城市变为option选项
var citySele=document.getElementById("city");
//在添加当前省份对应的城市到select框之前应该先清空其他成分的选项，再进行添加
//方式二：通过select父元素获取所有的城市option选项
var opts= citySele.getElementsByTagName("option");
var len=opts.length;
for(var i=1;i<len;i++)
{
citySele.removeChild(opts[1]);
}
for(var i=0;i<citys.length;i++){
var opt=document.createElement("option");
opt.innerHTML=citys[i];
//添加到第二个城市的下拉选框中
citySele.appendChild(opt);
}
}
</script>
</head>
<body>
<select name="country" onchange="getCountry()" >
<option value="none">--选择国家--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select>
<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>
<h2>选择的国家是</h2>
<div id="result" style="color:red;"></div>
<img src="" alt="还未选择国家" style="width:250px;height: 250px;">
</body>
</html>
