A的change事件里判断值是否等于A,如果是,隐藏下拉框B
$("#A").change(function(){ if(A下拉框的值=="A") { 隐藏B } });
好的 谢谢
楼上已经告诉你了要监听下拉框A的onchange事件。
然后你可以继续百度一下,“jQuery 获取下拉框的值”,这样用于判断A中是否被选中了A
最后你在百度 “jQuery 隐藏元素”,这样解决隐藏B的问题。
如果你不熟悉jQuery,那么找它的中文文档,花一个小时看看。
好的 谢谢
VS更新中,闲来无聊回答问题
先给你一个单纯的Html页,我们再来说这个问题
1 <html> 2 3 <head> 4 <!--Jquery用1.9.1是为了兼容IE--> 5 <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> 6 </head> 7 8 <body> 9 <select> 10 <option value="1">A</option> 11 <option value="2">B</option> 12 <option value="3">C</option> 13 <option value="4">D</option> 14 <option value="5">E</option> 15 <option value="6">F</option> 16 <option value="7">G</option> 17 <option value="8">H</option> 18 </select> 19 <select> 20 <option value="A">1</option> 21 <option value="B">2</option> 22 <option value="C">3</option> 23 <option value="D">4</option> 24 <option value="E">5</option> 25 <option value="F">6</option> 26 <option value="G">7</option> 27 <option value="H">8</option> 28 </select> 29 <script> 30 $(function() { 31 //do something... 32 }) 33 </script> 34 </body> 35 36 </html>
关于题主的需求,我们可以有2种实现思路。
第一种是“隐藏”,当你改变其中一个下拉框的值的时候,将另一个下拉框中的对应的选项隐藏,就像楼上两个仁兄所说。
示例代码:
1 $("select").on("change", function() { 2 var ChangeSelect = $(this); 3 var HiddenSelect = ChangeSelect.siblings().eq(0); 4 5 var NeedHiddenOption = HiddenSelect.find("option:contains(" + ChangeSelect.val() + ")"); 6 7 HiddenSelect.children(":hidden").show(); 8 NeedHiddenOption.hide(); 9 })
第二种是“删除”,先用JS记录下你所有的选项(无论是纯复制还是放到某个dom保存),当你改变一个下拉框的时候,js先通过记录恢复另一个下拉框中所有的option,然后删除对应的选项。
1 $("select").each(function() { 2 var select = $(this) 3 select.after('<div style="display:none">' + select.html() + '</div>') 4 }) 5 6 $("select").on("change", function() { 7 var ChangeSelect = $(this); 8 var HiddenSelect = ChangeSelect.siblings("select").eq(0); 9 var HiddenValue = HiddenSelect.val(); 10 HiddenSelect.html(HiddenSelect.next().html()) 11 HiddenSelect.find("option:contains(" + ChangeSelect.val() + ")").remove(); 12 HiddenSelect.val(HiddenValue); 13 })
这两种方法都有缺陷
第一种,代码简单。但是最大的问题是不兼容IE,为啥?因为IE不支持option的 display:none 属性。也就没法进行hide()操作。
第二种,解决了IE兼容性的问题,但是会在页面产生大量的废元素。
其实,可以将两种方案结合,将需要隐藏的项移出Select存到隐藏域中,需要用到时候再移回来,但是需要解决Dom的排序问题。这个我就不给你代码了,
因为我的VS更新完了!