版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/88366503
JavaScript之省市联动案例
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
// 定义二维数组,存储城市信息
var cities = new Array(4);
cities[0] = new Array("市辖区");
cities[1] = new Array("长春市","吉林市","松原市","延边市");
cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[4] = new Array("南京市","苏州市","扬州市","无锡市");
//给省的select注册onchange事件
window.onload = init;
function init(){
//获取省select 绑定 onchange
var provinceSelect = document.getElementById("province");
provinceSelect.onchange = change;
}
function change(){
//清空市select中的option
document.getElementById("city").innerHTML = "<option>----请-选-择-市----</option>";
//获取选中了哪一个省 this.value
//发现 省的value值 和 二维数组中的下标正好相等
var cs = cities[this.value];
//遍历数组,取出每一个市的名称
for(var i = 0;i < cs.length;i++){
var cname = cs[i];
//取出一个市.我们需要创建一个option
var op = document.createElement("option");//<option></option>
var textNode = document.createTextNode(cname);
//把文本节点 添加到 op中
op.appendChild(textNode);//<option>cname</option>
//把每次创建的option添加到 市这个select中
document.getElementById("city").appendChild(op);
}
}
</script>
<body>
<select id="province" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">吉林省</option>
<option value="2">山东省</option>
<option value="3">河北省</option>
<option value="4">江苏省</option>
</select>
<select id="city" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
</body>
</html>