二级联动---Linkage

效果
    主动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>





posted @ 2012-01-30 17:50  前端咖  阅读(389)  评论(0编辑  收藏  举报