步骤:
第一步:确定事件(onchange)并为其绑定一个函数
第二步:创建一个二维数组用于存储省份和城市
第三步:获取用户选择的省份
第四步:遍历二维数组中的省份
第五步:将遍历的省份与用户选择的省份比较
第六步:如果相同,遍历该省份下所有的城市
第七步:创建城市文本节点
第八步:创建option元素节点
第九步:将城市文本节点添加到option元素节点中去
第十步:获取第二个下拉列表,并将option元素节点添加进去
第十一步:每次操作前清空第二个下拉列表的option内容。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市二级联动</title>
<style type="text/css">
#birth{
border: 1px solid pink;
width: 500px;
height: 300px;
margin: auto;
text-align: center;
}
</style>
<script>
//创建二维数组,存储省份和城市
var citys = new Array(4);
citys[0] = new Array("东城区","西城区","崇文区","宣武区","朝阳区");
citys[1] = new Array("长沙市","株洲市","湘潭市","岳阳市","永州市");
citys[2] = new Array("南京市","常州市","徐州市","无锡市","苏州市");
citys[3] = new Array("广州市","深圳市","佛山市","汕头市","中山市");
function changeCity(value){
var sonCity = document.getElementById("sonCity");
//每次操作前清空第二个下拉列表的option内容
sonCity.options.length = 0;
for(var i = 0 ; i < citys.length ; i++){
if(value == i){
for(var j = 0; j < citys[i].length ; j++){
//创建城市文本节点
var textNode = document.createTextNode(citys[i][j]);
//创建option元素节点
var opEle = document.createElement("option");
opEle.appendChild(textNode);
sonCity.appendChild(opEle);
}
}
}
}
</script>
</head>
<body>
<div id="birth">
<p>籍贯</p>
<select οnchange="changeCity(value)">
<option>--请选择--</option>
<option value="0">北京</option>
<option value="1">湖南</option>
<option value="2">江苏</option>
<option value="3">广东</option>
</select>
<span>
<select id="sonCity">
</select>
</span>
</div>
</body>
</html>