JS中的二级联动的注意事项
Posted vansenjoy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS中的二级联动的注意事项相关的知识，希望对你有一定的参考价值。
今天做了一个二级联动的下拉选择框（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中的二级联动的注意事项的主要内容，如果未能解决你的问题，请参考以下文章