二级联动菜单--常见的城市二级联动

蔚落 2022-09-17 07:28 355阅读 0赞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> 二级联动菜单 </TITLE>
    <script language="javascript">
    var jiangxi=[["1","南昌"],["2","上饶"],["3","赣州"]];
    var zhejiang=[["1","杭州"],["2","嘉兴"]];
    var lalala=[["1","啦啦啦"]];
    
    var temp = 10;  /* temp 为要清除的个数，如不设可能会出现问题*/
    function showCities(cityArray)
    {
        for(var m=temp;m>=0;m--)
     　{
      　　//这个要看清楚,因为要重新填充下拉列表的话必须先清除里面原有的项,
    　　　//清除和增加当然是有区别的了,所以用递减
            document.form1.cities.options[m]=null;//将该项设置为空,也就等于清除了
     　}
      for(i=0;i<cityArray.length;i++)
     {
      document.form1.cities.options[i]=new Option(cityArray[i][1],cityArray[i][0]);
     }
    }
    var temp;
    function updateCities()
    {
    var selectedProvince=document.form1.province.value;
    switch(selectedProvince){  
            /* case'x': 表示对 x 数组进行操作*/
            case'1':showCities(jiangxi);break;
            case'2':showCities(zhejiang);break;
            case'3':showCities(lalala);break;
      
      }
      }
    </script>
    
    </HEAD>
    
    <BODY>
    
    <form name="form1" id="xx" method="post" action="">
    <select name="province" onChange="javascript:updateCities()">
    <option value="1">江西</option>
    <option value="2" >浙江</option>
    <option value="3" >啦啦啦</option>
    </select>
    <select name="cities">
    <option value="1">南昌</option>
    <option value="2">上饶</option> 
    <option value="3">赣州</option>
    </select>
    </form>
    
    </BODY>
    </HTML>