首页新闻找找看学习计划

条件显示事件怎么写js脚本。

0
[待解决问题]

两个下拉框A,B

A中有下拉值 A,B,C,D,E

B中有值:A,B,C,D,F,G,J

当下拉框A值为A时隐藏下拉框B

怎么写js呢?

长跑的主页 长跑 | 初学一级 | 园豆:11
提问于:2018-01-09 16:23
< >
分享
所有回答(3)
0

A的change事件里判断值是否等于A,如果是,隐藏下拉框B  

$("#A").change(function(){  if(A下拉框的值=="A")  { 隐藏B }   });

默卿 | 园豆:4063 (老鸟四级) | 2018-01-09 16:27

好的  谢谢

支持(0) 反对(0) 长跑 | 园豆:11 (初学一级) | 2018-01-09 17:06
0

楼上已经告诉你了要监听下拉框A的onchange事件。

 

然后你可以继续百度一下,“jQuery 获取下拉框的值”,这样用于判断A中是否被选中了A

最后你在百度 “jQuery 隐藏元素”,这样解决隐藏B的问题。

 

如果你不熟悉jQuery,那么找它的中文文档,花一个小时看看。

西漠以西 | 园豆:1670 (小虾三级) | 2018-01-09 16:46

好的   谢谢

支持(0) 反对(0) 长跑 | 园豆:11 (初学一级) | 2018-01-09 17:06
0

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更新完了!

写代码的相声演员 | 园豆:551 (小虾三级) | 2018-01-10 10:00
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册