级联菜单

来源：互联网发布：java erp系统编辑：程序博客网时间：2024/05/16 18:13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
       <title>级联菜单</title>
   <link rel="stylesheet" type="text/css" href=".css">
   <style type="text/css">
       *{
           font-size:30px;
       }
   </style>


   <script type="text/javascript">
       //JavaScript中的数组和 Java中区别有点大
       /*JavaScript特点:
           1. 声明数组时候的长度, 会随着之后的下标位增长而随之增长
           2. 数组的长度可以手动赋值
       */

       var arr = new Array(5);
       arr["早餐"] = ["包子","油条","豆浆","粉面"];
       arr["中餐"] = ["粉面","盒饭","盖码饭","泡面","沙县小吃"];
       arr["晚餐"] = ["辣椒炒肉","番茄炒蛋","爆炒猪肝","醋溜土豆丝","辣条炒饭"];

       function test (){
           //获取什么东西?
           var b = document.getElementById("big");//大类
           var l = document.getElementById("lit");//小类

           l.length = 1;//把小类的下拉只留下 -请选下类-

           //遍历
           for(var i=0; i<arr[b.value].length ; i++){ //二维中一维的长度
               //alert(arr[b.value][i]);
               var option = new Option(arr[b.value][i],arr[b.value][i])
               l.add(option);
           }

       }
   </script>
   </head>
   <body>
       <select id="big" onchange="test()">
           <option>--请选大类--</option>
           <option value="早餐">早餐</option>
           <option value="中餐">中餐</option>
           <option value="晚餐">晚餐</option>
       </select>
       <select id="lit">
           <option>--请选小类--</option>
       </select><br />
       <input type="submit" />
   </body>
</html>
<script type="text/javascript">
   var selObj = document.getElementById("big");
   //alert(selObj.length);
</script>

0 0