<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>二级联动下拉框</title>
<script>
var data={
"北京市":["海淀区","朝阳区","丰台区"],
"河北省":["石家庄","唐山","秦皇岛"],
"辽宁省":["沈阳","大连","鞍山"],
"山东省":["青岛","济南","烟台"]
}
//练习1
function getCountry(thisobj){
//当选项切换时, 触发onchange事件, 执行getCountry函数, 在函数中获取当前选中的国家并弹出!
alert(thisobj.value)
}
//练习2
function selectCity(thisobj){
//获取省份
var prov=thisobj.value
//获取城市
var cities=data[prov]
//获取第二个下拉框
var sel2=document.getElementById("city")
//清空第二个下拉框
sel2.innerHTML="<option>--选择城市--</option>"
//将每个城市填充到第二个下拉框中
for(var i=0;i<cities.length;i++){
//创建option,并将城市填充到option中
var opt=document.createElement("option")
opt.innerHTML=cities[i]
//将option添加到第二个下拉框中
sel2.appendChild(opt)
}
}
</script>
</head>
<body>
<select name="country" οnchange="getCountry(this)">
<option value="none">--选择国家--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select>
<br/><br/>
<hr/>
<br>
<div id="seleDiv">
<select id="province" οnchange="selectCity(this)">
<option>--选择省市--</option>
<option>北京市</option>
<option>河北省</option>
<option>辽宁省</option>
<option>山东省</option>
</select>
<select id="city">
<option>--选择城市--</option>
</select>
</div>
</body>
</html>
webday04-DOM-二级联动下拉框
最新推荐文章于 2022-08-26 16:18:50 发布