简单的二级联动实现

<html>
<head>
    <title>简单的Select联动菜单代码</title>
    <script type="text/javascript">
        var arr_province = ["==请选择==", "篮球", "足球", "乒乓球", "其他"];
        var arr_city = [
                ["==请选择=="],
                ["A01", "A02", "A03", "A04", "A05"],
                ["L01", "L02", "L03", "L04", "L05"],
                [],
                [],
                
        ];
        function init() {
            var province = document.form1.province;
            province.style.width = 150 + "px";
            var city = document.form1.city;
            city.style.width = 150 + "px";
            //给province赋值高度,才能在其里面写入内容
            province.length = arr_province.length;
            for (var i = 0; i < arr_province.length; i++) {
                province.options[i].text = arr_province[i];
                province.options[i].value = arr_province[i];
            }
            //设置默认被选中的选项
            var index = 0;
            province.selectedIndex = index;
            //给city赋值高度,才能在其里面写入内容
            city.length = arr_city[index].length;
            for (var j = 0; j < arr_city[index].length; j++) {
                city.options[j].text = arr_city[index][j];
                city.options[j].value = arr_city[index][j];
            }

        }
        function select_change(num) {
            var city = document.form1.city;
            city.length = 0;
            city.length = arr_city[num].length;
            for (var i = 0; i < arr_city[num].length; i++) {
                city.options[i].text = arr_city[num][i];
                city.options[i].value = arr_city[num][i];
            }
        }
    </script>

</head>
<body onload="init()">
    <form name="form1">
        税总:<select name="province" onchange="select_change(this.selectedIndex)"></select>
        类别:<select name="city"></select>
    </form>
</body>
</html>

 

 

 

 

另一种:

 1 <script  type="text/javascript">
 2             $(function () {
 3 
 4                 $("#S_TYPE").change(function () {
 5                     var sz = $("#S_TYPE").val();
 6                     $("#STATUS option").remove();
 7                     if (sz == "寄件") {
 8                         $("#STATUS").prepend("<option value='A01'>前台</option>");
 9                         $("#STATUS").prepend("<option value='A02'>部门</option>");
10                         $("#STATUS").prepend("<option value='A03'>已发件</option>");
11                         $("#STATUS").prepend("<option value='A04'>全部</option>");
12                     }
13                     else if (sz == "收件") {
14                         $("#STATUS").prepend("<option value='L05'>前台</option>");
15                         $("#STATUS").prepend("<option value='L04'>部门</option>");
16                         $("#STATUS").prepend("<option value='L03'>已收件</option>");
17                         $("#STATUS").prepend("<option value='L02'>全部</option>");
18                     }
19                     else if (sz == "全部") {
20                         $("#STATUS").prepend("<option value='前台'>前台</option>");
21                         $("#STATUS").prepend("<option value='L04'>部门</option>");
22                         $("#STATUS").prepend("<option value='L03'>已发件</option>");
23                         $("#STATUS").prepend("<option value='L02'>已收件</option>");
24                         $("#STATUS").prepend("<option value='L01'>全部</option>");
25                     }
26 
27                 });
28 
29             });
30     </script>
View Code
 1 <th style="text-align:left" class="auto-style3" >快件类型:
 2                         <select id="S_TYPE" runat="server" CssClass="Micro-12-black" Height="19px" Width="62px" >
 3                             <option>全部</option>
 4                             <option>寄件</option>
 5                             <option>收件</option>
 6                         </select>
 7                      </th>
 8 
 9 
10  <th style="text-align:right" class="auto-style2">快件状态:</th>
11                     <td class="auto-style2">
12                        
13                         <select id="STATUS" CssClass="Micro-12-black"  runat="server">
14                             <option id="f1">前台</option>
15                             <option id="f2">部门</option>
16                             <option id="f3">已发件</option>
17                             <option id="f4">已收件</option>
18                             <option id="f5">全部</option>
19                         </select>  
20                     </td>
View Code

 

posted @ 2017-01-03 16:16  阳光下的海风  阅读(347)  评论(0编辑  收藏  举报