利用js完成简单的二级联动
<!DOCTYPE html>
<html>
<head>
<title>
省市二级联动下拉列表
</title>
<script type="text/javascript">
//定义一个二维数组存储省份和城市数据
var arr = new Array();
arr[0] = ["天津","红桥","西青","河北"];
arr[1] = ["四川","成都","绵阳","攀枝花"];
arr[2] = ["广东","佛山","广州","梅州"];
arr[3] = ["湖南","长沙","衡阳","株洲"];
window.onload = function(){
//获取省份元素
var province = document.getElementById('province');
arr.forEach(function(val){
//创建option元素
var option = document.createElement("option");
//创建文本
option.innerHTML = val[0];
//option元素添加到select里面
province.appendChild(option);
});
//给province元素添加onchange,一般我们的下拉列表都是添加onchange事件
var city = document.getElementById("city");
province.onchange = function(){
var city = document.getElementById("city");
//删除城市里面列表项
//获取city里面的所有option元素
var cityOption = city.getElementsByTagName('option');
for (var i = 0; i < cityOption.length; i++) {
city.removeChild(cityOption[i]);
i--;
}
//用父节点调用删除节点方法 把option删除
arr.forEach(function(val){
if(val[0] == province.value){
for(var i = 1;i < val.length;i++){
console.log("fjdoif");
//创建option元素
var option = document.createElement("option");
//添加文本
option.innerHTML = val[i];
city.appendChild(option);
}
}
});
}
}
</script>
</head>
<body>
<select id = "province">
<option value = "0">请选择省份</option>
</select>
<select id = "city">
<option value = "0">请选择城市</option>
</select>
</body>
</html>
``