今天做了一个二级联动的下拉选择框（select）做这个二级联动的时候遇到了一个问题，就是二级菜单的内容越来越多，选择一次一级菜单就会产生一次二级菜单的内容，而且是越来越多。通过思路和代码的双重排查后发现问题出现的原因：更改一级菜单时就必须把二级菜单清空，否则也会出现我这样的问题！
特别要注意一点：转换一级选项时，要清空先前创建的二级选项，否则选项会越来越多
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title></title>
</head>
<body>
???<form method=post action="" name="form1">
???????<select name="province" ?onchange="getdiqu()">
???????????<option value="0">请选择所在城市 </option>
???????????<option value="成都">成都</option>
???????????<option value="绵阳">绵阳</option>
???????????<option value="德阳">德阳</option>
???????</select>
???????<select name="city">
???????????<option value="0">请选择所在地区</option>
???????</select>
???</form>
???<script>
???????/*定义二维数组存放地区*/
???????var city=[
???????????["武侯区","锦江区","龙泉驿区","天府新区"],
???????????["涪城区","高新区"],
???????????["旌阳区","罗江县","中江县"]
???????];
???????function getdiqu(){
???????????//获得城市下拉框的对象
???????????var sltProvince = document.form1.province;
???????????//获得地区下拉框的对象
???????????var sltCity = document.form1.city;
???????????//得到对应城市的地区数组
???????????var provinceCity = city[sltProvince.selectedIndex - 1];
???????????//清空寺区下拉框（二级子菜单）特别注意一定要清空，否则二级菜单的内容会越来越多
???????????sltCity.length = 0;
???????????//将地区数组中的值填充到地区下拉框中
???????????for(var i=0;i<provinceCity.length;i++){
???????????????sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
???????????}
???????}
???</script>
</body>
</html>
JS中的二级联动的注意事项
原文地址：http://www.cnblogs.com/vansjun/p/7499838.html