需要了解二维数组相关知识。
接下来直接展示代码,有详细注释:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市二级联动</title>
<script type="text/javascript">
//二维数组,通过value值知道 接下来选择那个省的城市
function selectCity(value){
var citys = [
["海淀","昌平","朝阳"],
["郑州","洛阳","开封"],
["沈阳","大连","鞍山"]
];
//取出二维数组中的 其中一个一维数组
var city = citys[value];
//通过id获取位置
var cityId = document.getElementById("cityId");
//将获得的市拼接成一个字符串
var str = "<option>----请选择市----</option>";
//遍历一维数组
for (var i = 0; i < city.length; i++) {
str += "<option>----"+city[i]+"----</option>";
}
//将拼接好的字符串进行识别并显示
cityId.innerHTML = str;
}
</script>
</head>
<body>
<table width="600" height="350px">
<tr>
<td align="right">所在地</td>
<td colspan="3">
<select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
<option value="">----请选择省----</option>
<option value="0">北京</option>
<option value="1">河南</option>
<option value="2">江苏</option>
</select>
<select id="cityId" style="width:150px">
<option value="">----请选择市----</option>
</select>
</td>
</tr>
</table>
</body>
</html>
效果截图: