当前位置: 代码迷 >> JavaScript >> 求代码,来解决两个上拉框的联动
  详细解决方案

求代码,来解决两个上拉框的联动

热度:107   发布时间:2012-11-15 15:16:15.0
求代码,来解决两个下拉框的联动
我有两个下拉框,分别为:
下拉框一
HTML code
<select onchange="A(this)" name="STy1" id="STy1" size="1"><option value="sn" selected="true">Family/Last Name</option><option value="cn">Full Name</option><option value="id">ID</option></select>

和下拉框二
HTML code
<select name="SLk1" id="SLk1" size="1"><option value="OBW">That Begins With</option><option value="OOS">That Contains</option><option value="OEM">That Equals</option></select>


我现在想知道怎么写js的function A(obj),来实现以下功能。
1)选中下拉框一的ID,下拉框二中就只剩“That Equals”选项。
2)选中下拉框一的“Family/Last Name”或者“Full Name”,下拉框二中所有选项都可选,默认选中“That Begins With”。

非常感谢!

------解决方案--------------------
HTML code
<select onchange="A(this)" name="STy1" id="STy1" size="1">
<option value="sn" selected="true">Family/Last Name</option>
<option value="cn">Full Name</option>
<option value="id">ID</option>
</select>
<select name="SLk1" id="SLk1" size="1">
<option value="OBW">That Begins With</option>
<option value="OOS">That Contains</option>
<option value="OEM">That Equals</option></select>
<script type="text/javascript">
    var opt = [];
    function A(obj) {
        var sel = document.getElementById('SLk1');
        if (obj.value == 'id') {
            if (opt.length == 0) { opt[0] = sel.options[0]; opt[1] = sel.options[1]; } //存储起来,IE不支持option的style="display:none"
            //删除1,2项
            sel.removeChild(sel.options[0]); 
            sel.removeChild(sel.options[0]);
        }
        else if (sel.options.length == 1) { //重新添加1,2项
            sel.insertBefore(opt[0],sel.options[0]);
            sel.insertBefore(opt[1], sel.options[1]);
            sel.selectedIndex = 0;
        }
    }
</script>

------解决方案--------------------
JScript code
<html>
<head>
    <title>demo</title>
</head>
<body>
    <select onchange="A(this)" name="STy1" id="STy1" size="1">
        <option value="sn" selected="selected" show="OBW,OOS,OEM" defvalue="OBW">Family/Last Name</option>
        <option value="cn" show="OBW,OOS,OEM" defvalue="OBW">Full Name</option>
        <option value="id" show="OEM" defvalue="OEM">ID</option>
    </select>
    <select name="SLk1" id="SLk1" size="1">
        <option value="OBW">That Begins With</option>
        <option value="OOS">That Contains</option>
        <option value="OEM">That Equals</option>
    </select>
    <script type="text/javascript">
        var Ori = {
            STy1: "STy1",
            SLk1Id: "SLk1",
            SLk1: [],
            Init: function() {
                var obj = document.getElementById(this.SLk1Id);
                var list = [];
                if (obj) {
                    for (var i = 0; i < obj.options.length; i++) {
                        list[i] = { text: obj.options[i].text, value: obj.options[i].value };
                    }
                    this.SLk1 = list;
                    A(document.getElementById(this.STy1));
                }
            },
            Show: [],
            ShowDefIndex: 0,
            SetShow: function() {
                var obj = document.getElementById(this.SLk1Id);
                if (obj) {
                    obj.options.length = 0;
                    for (var i = 0; i < this.Show.length; i++) {
                        obj.options[i] = new Option(this.Show[i].text, this.Show[i].value);
                    }
                    obj.selectedIndex = this.ShowDefIndex;
                }
            }
        };
        function A(obj) {
            var show = obj.options[obj.selectedIndex].getAttribute("show");
            var defvalue = obj.options[obj.selectedIndex].getAttribute("defvalue")||"";
            if (show) {
                Ori.ShowDefIndex = 0;
                show = show.split(",");
                Ori.Show.length = 0;
                var index = 0;
                for (var i = 0; i < show.length; i++) {
                    for (var j = 0; j < Ori.SLk1.length; j++) {
                        if (Ori.SLk1[j].value == show[i]) {
                            if (defvalue == show[i]) {Ori.ShowDefIndex = index; }
                            Ori.Show[index] = { text: Ori.SLk1[j].text, value: Ori.SLk1[j].value };
                            index++;
                            continue;
                        }
                    }
                }
                Ori.SetShow();
            }
        }
        window.onload = function() {
            Ori.Init();
        };
    </script>
</body>
</html>
 
  相关解决方案