二级联动---Linkage-阿里云开发者社区

二级联动---Linkage

2012-01-30 803

简介： 效果主动select影响从动select。创建Linkage函数 function Linkage(o1,o2){ //接受传过来的ID this.

+关注继续查看

效果
    主动select影响从动select。

    创建Linkage函数
    function Linkage(o1,o2){
        //接受传过来的ID
        this.obj1 = document.getElementById(o1);
        this.obj2 = document.getElementById(o2);

        //定义绑定select数据的值
        var obj1Data = "1|2|3".split("|");
        var obj2Data = ["--无--".split("|"),"a1|a2|a3".split("|"),"b1".split("|"),"c1|c2".split("|")];

        //创建元素
        var opt = document.createElement("option");
        opt.innerHTML = opt.value = "--无--";
        //将创建的元素添加到select中
        this.obj1.appendChild(opt);

        for(var i=0;i<obj1Data.length;i++){
            var opt = document.createElement("option");
            opt.innerHTML = opt.value = obj1Data[i];
            this.obj1.appendChild(opt);
        }

        //设置select默认选择第一个
        this.obj1.selectIndex = 0;

        //同理
        this.obj2.length = 0;
        var opt = document.createElement("option");
        opt.innerHTML = opt.value = "--无--";
        this.obj2.appendChild(opt);
        this.obj2.selectedIndex = 0;

        //将this复制给_this
        var _this = this;

        //为select绑定onchange事件
      this.obj1.onchange = function () {
           var tmp = obj2Data[this.selectedIndex];
           _this.obj2.length = 0;
           for (var i = 0; i < tmp.length; i++) {
                var opt = document.createElement("option");
                opt.innerHTML = opt.value = tmp[i];
                _this.obj2.appendChild(opt);
            }
            if (tmp.length != 1) {
                 //当select的选项长度超过一个时为其添加option"其他"
                 var opt = document.createElement("option");
                 opt.innerHTML = opt.value = "其它";
                 _this.obj2.appendChild(opt);
             }
                    _this.obj2.selectedIndex = 0;
                }
            }
            this.init();

}
源代码：

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>二级联动---Linkage---www.cnblogs.com/kuikui</title>
 5     <script type="text/javascript">
 6         function Linkage(o1, o2) {
 7             this.obj1 = document.getElementById(o1);
 8             this.obj2 = document.getElementById(o2);
 9 
10             var obj1Data = "1|2|3".split("|");
11             var obj2Data = ["--无--".split("|"), "a1|a2|a3".split("|"), "b1".split("|"), "c1|c2".split("|")];
12 
13             this.init = function () {
14                 this.obj1.length = 0;
15                 var opt = document.createElement("option");
16                 opt.innerHTML = opt.value = "--无--";
17                 this.obj1.appendChild(opt);
18                 for (var i = 0; i < obj1Data.length; i++) {
19                     var opt = document.createElement("option");
20                     opt.innerHTML = opt.value = obj1Data[i];
21                     this.obj1.appendChild(opt);
22                 }
23                 this.obj1.selectedIndex = 0;
24                 this.obj2.length = 0;
25                 var opt = document.createElement("option");
26                 opt.innerHTML = opt.value = "--无--";
27                 this.obj2.appendChild(opt);
28                 this.obj2.selectedIndex = 0;
29                 var _this = this;
30                 this.obj1.onchange = function () {
31                     var tmp = obj2Data[this.selectedIndex];
32                     _this.obj2.length = 0;
33                     for (var i = 0; i < tmp.length; i++) {
34                         var opt = document.createElement("option");
35                         opt.innerHTML = opt.value = tmp[i];
36                         _this.obj2.appendChild(opt);
37                     }
38                     if (tmp.length != 1) {
39                         var opt = document.createElement("option");
40                         opt.innerHTML = opt.value = "其它";
41                         _this.obj2.appendChild(opt);
42                     }
43                     _this.obj2.selectedIndex = 0;
44                 }
45             }
46             this.init();
47         }
48     </script>
49 </head>
50 <body>
51     <select id="test1">
52     </select>
53     <select id="test2">
54     </select>
55     <script type="text/javascript">
56         Linkage("test1", "test2");
57     </script>
58 </body>
59 </html>