我有两个下拉框,分别为:
下拉框一
- 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>