综合案例
日常中会有每当我们确定好第一个下拉框的时候,后面一个就会是属于前一个的。
<html>
<head>
<title>myTitle</title>
<meta charset="utf-8" />
</head>
<body>
<select id="province" onChange="changeCity()">
<option value="Hunan" id="hn">湖南</option>
<option value="Guangdong" id="gd">广东</option>
</select>
<select id="city">
<option value="ShenzhenCity">深圳市</option>
</select>
<script>
function changeCity() {
var province = document.getElementById("province");
var city = document.getElementById("city");
var length = city.children.length;
for(var i = length-1;i >= 0;i--) {
city.removeChild(city.children[i]);
}
if(province.value == "Guangdong") {
var child1 = document.createElement("option");
child1.value="ShenzhenCity";
child1.innerText="深圳市"
city.appendChild(child1);
} else {
var child1 = document.createElement("option");
child1.value="ChangshaCity";
child1.innerText="长沙市";
city.appendChild(child1);
var child2 = document.createElement("option");
child2.value = "ShaoyangCity";
child2.innerText = "邵阳市";
city.appendChild(child2);
}
}
</script>
</body>
</html>