求代码，来解决两个下拉框的联动
我有两个下拉框，分别为：
下拉框一
- 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>
[解决办法]
下面的方法可以保留下拉菜单的任意项，或者选中任意项
- JScript code
<body> <select 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"> (function(){ //存储可变下拉框选项 var opt = [], //存储可变下拉框对象 sel = document.getElementById('SLk1'); //将可变下拉框中的选项存入数组中 (function(){ var i = 0; while (opt.length != sel.length){ opt[i] = sel.options[i]; i++; } })(); //当选中项发生变化时，调用处理函数 document.getElementById("STy1").onchange = function(){ A(this, 2,1); }; //obj下拉对象，n为选择"id"后的剩余项下标，selectedN为被选中项下标（下标从0开始） function A(obj,n,selectedN) { //选中项为Id是，将所有项删除，添加剩余项 if (obj.value == 'id') { while(sel.length){ sel.removeChild(sel.options[0]); } sel.options[0] = opt[n]; } //加载所有项 else if(sel.length == 1){ sel.removeChild(sel.options[0]); (function(){ var i = 0; while(sel.length != opt.length){ sel.options[i] = opt[i]; i++; } })(); sel.options[selectedN].selected = "selected"; } //选中项 else{ sel.options[selectedN].selected = "selected"; } } })();</script></body>