需求:实现一个简单的地址关联下拉选择框。
1、通过id拿到select标签
var city = document.getElementById("city");
2、定义一个select.onchange匿名函数
3、定义一个变量获取select标签里面的value
var cy = city.value;
4、通过switch循环判断这个变量cy是哪个值,进而进行相应的html代码替换。
document.getElementById("area").innerHTML = "<option>xxx</option>"
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<select id="city">
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="sh">上海</option>
</select>
<select id="area">
<option>海淀</option>
<option>朝阳</option>
<option>东城</option>
</select>
</body>
<script type="text/javascript">
var city = document.getElementById("city");
city.onchange = function(){
var cy = city.value;
switch (cy) {
case "bj":
var area = document.getElementById("area");
area.innerHTML = "<option>海淀</option><option>朝阳</option><option>朝阳</option>";
break;
case "sh":
var area = document.getElementById("area");
area.innerHTML = "<option>浦东</option><option>杨浦</option><option>浦西</option>";
break;
case "tj":
var area = document.getElementById("area");
area.innerHTML = "<option>河西</option><option>安华</option><option>普洗</option>";
break;
default:
alert("error");
}
}
</script>
</html>