今天做了一个二级联动的下拉选择框（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>
时间： 2024-10-26 21:40:20