jquery, select, option, firefox, chrome, IE, opera...

最新推荐文章于 2020-11-03 16:23:19 发布
原创 最新推荐文章于 2020-11-03 16:23:19 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #chrome #firefox #ie #opera #safari

本文探讨了在不同浏览器中隐藏和显示select下option元素的技术挑战，并分享了一个有效的解决方案，通过使用.wrap和.unwrap方法来实现跨浏览器兼容的选项隐藏功能。同时，文章还提到了一些额外的优化技巧，如使用firebug和firerainbow工具来快速调试代码。

本来目标只是隐藏select下的option

 

最初尝试用jQuery里的$("select option").hide()和$("select option").show()控制option隐藏与出现，firefox4和chrome10均ok，但是chrome不能正确判断:hidden属性(只要进行过.hide()，.is(":hidden")就永远为true)，随后发现可以用(.css("display:none")=="none")判断，然后发现IE(我用的是腾讯TT，疑似6)等也可以判断。但是，IE(以及opera、safari)不支持option的display属性的，hide、show操作会改变display的值，但option的可见性不会变化尴尬。

之后痛苦地查解决方案，大家均表示要在代码里备份一下然后remove，需要的时候再根据备份add，觉得极为麻烦，几乎放弃，突然google到一个，使用.wrap("<span style='display:none'></span>"); 达到隐藏效果，再使用unwrap()去除隐藏效果。还能天然使用jQuery的$("select>option")和$("select span option")判断是否隐藏，终于完成...

btw, firebug+firerainbow不错，不过，这导致ff下的代码总是第一个迅速调通的，然后就只能生气发火骂人抓狂......还有，刚发现上面的方法在opera下option只是会变成空白，但还可以选尴尬....算了，一共就5个人会访问的页面里没人会用opera的...

 

Thanks to:http://www.jb51.net/article/20842.htm

使用jQuery隐藏＜select＞元素中的＜option＞选项的方法
PixelNovaO的博客
10-05 845
现在，我们将使用jQuery来隐藏其中的一个选项。假设我们要隐藏值为"3"的选项。首先，让我们讨论如何使用jQuery来隐藏元素中的选项。总结一下，要使用jQuery隐藏元素中的选项，可以使用。方法和适当的选择器来选择要隐藏的选项。我们将使用这个方法来隐藏选项。来选择具有值为"3"的选项。如果要隐藏多个选项，可以按照类似的方法使用。来选择具有值为"2"和"4"的选项，并使用。在这个示例中，我们使用了多个选择器。如果要显示之前隐藏的选项，可以使用。选择之前被隐藏的选项，并使用。方法可以显示之前隐藏的选项。
select2动态填充数据（豪华VIP自定义option）
hangGe0111的博客
12-29 2630
1.代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;select2&lt;/title&gt; &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4
firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出（解决方案）
weixin_30533797的博客
06-29 426
问题出现场景1： 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案：去掉最外层静态框的 tabindex="-1" role="dialog"属性 问题出现场景2：在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果（不能点击），而在谷歌中却是好的， 主要原因是模态框与时间下拉菜单层级关系造成（z-i...
JQuery隐藏、添加select的option
weixin_49456013的博客
08-19 1686
需求 级联查询，根据前一个select选择的值，动态改变后一个select的值 页面效果大致如下： 代码： <ul> <li> <p>设备类型：</p> <select name="deviceType" id="deviceType"> <option value="outdoor">门口机</
jquery选择下拉框触发事件的实现
热门推荐
飞鸿的博客
06-06 3万+
因为jquery选择下拉框触发事件的实现而焦头烂额，先前我用了对下拉框option中的id用了click事件，在火狐中竟然能运行而在其他浏览器却不行，这让我一度以为是浏览器兼容问题。错错错，option中没有id也没有click事件。我的天，超级发现问题超级开心。下面是我的实现。所需知识bind（）方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。其语法为：$(selector...
完美解决html中select的option不能隐藏的问题。
weixin_33759269的博客
12-03 2386
开发过程中无意遇到这个问题,解决问题第一时间就是百度。结果得到如下方法： 1、首先设置option的display:none的方案肯定是不可行了；2、某网友提出的两种方案：a.在option标签上面加上disabled="disabled"属性，表示不可用，这种方案只是让option不能选择，但没有隐藏掉b.如果想隐藏掉，只能把optio...
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
10-26
在本篇文章中，我们将介绍如何使用JavaScript来获取HTML中的select元素的当前值，并且确保这段代码兼容主流的浏览器，包括IE、Firefox、Opera和Chrome。在Web开发中，select元素通常用来制作下拉列表，它允许用户从...
关于select标签的高度设置在ie6/ie7下兼容心得
12-13
这种不一致的浏览器行为给前端开发带来了一定困扰，因为其他现代浏览器如Firefox、Chrome、Safari和Opera在这方面表现得更为一致。 面对这个问题，开发者们通常采取以下几种策略： 1. **使用JavaScript或jQuery...
Jquery操作选择框实践教程与SelectBox.jsp示例
<option value="firefox">Firefox</option> <option value="ie">Internet Explorer</option> <option value="opera">Opera</option> <option value="safari">Safari</option> </select> ``` 在JQuery中，我们...
select在各浏览器中显示option的测试结果分享
09-25
这个方法在 Firefox、Chrome、Safari、Opera 上显示正常，但在 IE9、IE8、IE7 下无法显示 `<option>`。 方法3：结合 `add()` 和 `insertBefore()` 方法。 ```html function init() { var s = document....
jquery-selectOption:跨平台切换（显示隐藏）选择>选项元素
06-25
jquery-selectOption 跨平台切换（显示/隐藏）选择>选项元素 示例代码位于 简单的API $ ( 'select' ) . selectOption ( ) ; $ ( 'select' ) . hideAllOption ( ) ; $ ( 'select' ) . showAllOption ( ) ; $ ( 'select' ) . hideOption ( ':gt(1)' ) ; $ ( 'select' ) . showOption ( ':gt(1)' ) ;
jQuery Select下拉框操作小结(推荐)
01-21
jQuery获取Select元素，并选择的Text和Value: 1. $(“#select_id”).change(function(){//code…}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$(“#select_id”).find(“option:selected”).text(); //获取Select选择的Text 3. var checkValue=$(“#select_id”).val(); //获取Select选择的Value 4. var checkIndex=$(“#select_id “).get(0).select
jquery如何获得option的值和对option进行操作（jq显示、隐藏option标签）
swirlee的博客
12-25 4238
选中一规格值，另一栏的规格列表隐藏该规格值           if(spec=="spec1"){             $("#spec2 option").show();             var values = $("#spec1").val();             $("#spec2 option[value="+values+"]").hide();        ...
Jquery 隐藏显示下拉框的项option
子良
03-14 5348
[code="Html"] New Web Project $(function(){ show(); }); /* */ function show(){ ...
jQuery 点击option 更改select 的name属性(解决谷歌Chrome onclick事件失效问题)
zzzmgr的博客
09-06 2559
需求:点击不同的选项向后台提交的name也随之改变(1,2选项 name="state" ;3选项name="state2") 一个简单的select标签 &lt;select style="width: 165px;" name="state" id="state"&gt; &lt;option value=""&gt;-请选择-&lt;
firefox与chrome中对select下拉框中的option支持问题
afei2530的博客
12-09 396
firefox可以直接修改option的字体样式,但是chrome中option的字体样式是继承select的,这个是在项目中遇到的,具体的可以看一下 http://www.cnblogs.com/rocky-AGE-24/p/5027760.html 里面的select 转载于:https://www.cnblogs.com/rocky-AGE-24/p/5034337.html...
jquery/js动态控制select 里面的option显示和隐藏
Neddle的博客
11-03 2978
jquery/js动态控制select 里面的option显示和隐藏 业务需求，动态展示下拉框里面的option，已经选择过的就不再显示。 解决方法：遍历option，对想要隐藏的添加 display:none 完美解决，用的是chrome哦！其他浏览器没试过！ ...
遇到的下拉菜单兼容性问题~firefox和chrome
april_4的博客
11-25 4854
写代码遇到兼容性问题，chrome和firefox下的下拉菜单表现的不一样，前者刷出来会显示空白，然后下拉才会有选项，后者直接把第一个选项显示，这就来了一个问题，我要做的一个页面是要通过ngModelChange触发不同的页面显示，如果已经有值，而且是用户期望，用户不选择，就不会触发，换句话说，我就是希望一刷出来就是空白，用户下拉才出来选项~   邮件发出来了也没有人理我，项目太忙了吧~连测试都
使用jQuery实现不同select选项决定div的显示和隐藏
菜鸟de羽毛
07-24 6420
在进行编码的时候，通常会遇到需要根据选择的select来决定一些div需不需要显示，在这里提供了这种功能的实现方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值