级联菜单下拉的实现

来源：互联网发布：mplayerx for mac破解编辑：程序博客网时间：2024/05/01 12:08

最近在项目中用到了级联菜单，在网上查过资料后，大概有两种实现思路：

1.下拉列表中的数据从数据库中自动获取

2.下拉列表中的每一个选项都写在代码中

相信我们都会选择第一种方法，这样不仅增强了代码的复用性，而且当我们的需求变动，需要显示新的数据时，只要更新数据库就可以了。而第二种方法只能适用于某种情况，需求改变，就需要在代码中进行大量的修改。

我们今天就先来介绍一下用第二种方法来实现级联下拉菜单的效果

[csharp] view plain copy
<!DOCTYPE >   
<html>    
    <head>   
        <title> 代码实例:级联菜单 </title>   
        <meta content="text/html; charset=utf-8" />   
    </head>   
    <body>   
        <select id="College" name="College" size="1" onchange="Redirect(this.options.selectedIndex)">   
            <option value="">化学与材料科学学院</option>   
            <option value="">管理学院</option>   
            <option value="">教育学院</option>   
            <option value="">经济学院</option>  
            <option value="">其他</option>   
        </select>   
        <select id="Major" name="Major" size="1">   
            <option value="1">化学</option>   
            <option value="2">材料化学</option>   
            <option value="3">应用化学</option>   
        </select>   
        <script type="text/javascript">   
  
            var groups = document.getElementById("College").options.length;   
            var group = new Array(groups)   
            for (i = 0; i < groups; i ++)   
            group[i] = new Array()   
            group[0][0] = new Option("化学","40")   
            group[0][1] = new Option("材料化学","41")   
            group[0][2] = new Option("应用化学","42")   
  
            group[1][0] = new Option("财务管理本科","1")   
            group[1][1] = new Option("财务管理专接本","2")   
            group[1][2] = new Option("财务会计专科","3")   
            group[1][3] = new Option("财务信息管理专科","4")   
  
            group[2][0] = new Option("初等教育理本科","80")   
            group[2][1] = new Option("初等教育文本科","81")   
            group[2][2] = new Option("教育学本科","82")   
            group[2][3] = new Option("心理学本科","83")   
  
            group[3][0] = new Option("国际经济与贸易本科","120")   
            group[3][1] = new Option("市场营销本科","121")   
            group[3][2] = new Option("国际贸易实务专科","122")   
            group[3][3] = new Option("市场营销专科","123")   
            group[3][4] = new Option("金融与证劵专科","124")   
  
            group[4][0] = new Option("其他","160")   
  
            var temp = document.getElementById("Major");   
            function Redirect(x){   
               for (m = temp.options.length-1; m > 0; m --)   
               temp.options[m] = null   
               for (i = 0; i < group[x].length; i ++){   
                   temp.options[i] = new Option(group[x][i].text,group[x][i].value);   
               }   
               temp.options[0].selected = true   
            }   
        </script>    
  
    </body>   
</html>   

阅读全文

0 0