<!DOCTYPE h1 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>用js实现下拉框的二级联动</title>
<script type="text/javascript">
//1.创建一个二维数组用于存放城市
var cities=new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
//方法一：用js实现
function changeCity(index){
//7.获取第二个下拉列表
var cityNode=document.getElementById("city");
//9.初始化第二个列表，清空数据
cityNode.options.length=0;
//2.遍历二维数组中的省份与选中的省份进行比较，注意比较的是下标
for(var x=0;x<cities.length;x++){
//判断选中的省份
if(index==x){
//3.遍历所选中省份下的城市列表
for(var y=0;y<cities[x].length;y++){
//4.创建城市的文本节点
var textNode=document.createTextNode(cities[x][y]);
//5.创建option元素节点
var optionNode=document.createElement("option");
//6.将城市的文本节点添加到option元素节点中
optionNode.appendChild(textNode);
//8.将option元素节点添加到第二个城市列表中
cityNode.appendChild(optionNode);
}
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td>籍贯</td>
<td><select οnchange="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select></td>
</table>
</body>
</html>
用jQuery实现二级联动的方法请参考下一篇博文 哦了~