<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>联动</title>
</head>
<body>
<!--定义省份的下拉列表框-->
<select id="province">
<option>请选择省份:</option>
</select>
<!--定义城市的下拉列表框-->
<select id="city">
<option>请选择城市:</option>
</select>
<!--js代码-->
<script>
// 定义一个各个省份对应的城市
data={"河北省":["廊坊","邯郸"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"]};
var p = document.getElementById("province");// 得到省份标签对象
var c = document.getElementById("city");//得到城市标签对象
//循环data字典对象，得到字典的key
for (var i in data){
// 生成与字典key个数相同的option标签对象
var optionP = document.createElement("option");
optionP.innerText = i;//将得到的新的option对像的文本内容改为字典的key
p.appendChild(optionP);//将具有文本内容的option对象添加为省份标签对象的子标签
}
//省份标签的域的内容修改事件
p.onchange = function () {
//获取当前下拉列表框的域的内容的标签元素的内容
var pro = (this.options[this.selectedIndex]).innerText;
var citys = data[pro];//将获得的省份的option标签内容对应的城市信息添加到新的cicy数组对象里
//清空option
c.innerHTML="";//先清空城市下拉列表框中的城市信息
//循环得到的省份对应的城市信息，获取到每一个城市名
for (var i =0;i<citys.length;i++){
//在城市的下拉列表框中创建与城市名个数相同的新的option标签对象
var option_city = document.createElement("option");
option_city.innerText = citys[i];//将城市的名字添加到新创建的option标签对象的文本内容中
c.appendChild(option_city);//在城市的下拉列表框中添加这个完整的option标签对象
}
}
</script>
</body>
</html>
