<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>select联动</title>
</head>
<body>
<select id="province">
<option>请选择省份:</option>
</select>
<select id="city">
<option>请选择城市:</option>
</select>
<script>
data = {"北京": ["朝阳区", "海淀区","东城区","西城区","丰台区","昌平区","通州区"],
"河北": ["石家庄", "保定市","唐山市","衡水市","秦皇岛市","涿州市"],
"山东": ["济南市","青岛市","威海市", "烟台市"]};
var province = document.getElementById("province");
var city = document.getElementById("city");
for (var i in data) {
var optionP = document.createElement("option");
optionP.innerHTML = i;
province.appendChild(optionP);
};
province.onchange = function () {
var pro = (this.options[this.selectedIndex]).innerHTML;
var citys = data[pro];
// 清空option
city.innerHTML = "";
for (var i=0;i<citys.length;i++) {
var option_city = document.createElement("option");
option_city.innerHTML = citys[i];
city.appendChild(option_city);
};
};
</script>
</body>
</html>