【解决】SELECT标签中OPTION的显隐控制(兼容IE)

小鱼儿 2021-10-13 01:44 1167阅读 1赞

问题描述：

在有些功能切换的时候，select标签中的某些option是要被隐藏的。但通过设置option的样式为 display:none根本无法隐藏option标签。

解决方案：

1、首先设置option的display:none的方案肯定是不可行了；  
2、某网友提出的两种方案：

1.在option标签上面加上disabled="disabled"属性，表示不可用，这种方案只是让option不能选择，但没有隐藏掉  
2.如果想隐藏掉，只能把option从DOM树中去除，然后对去除的option进行缓存，在要显示的时候再将option从缓存中取出加入DOM树中

肯定也是不符合需求的。

3、终极方案（经测试兼容各浏览器）：给option外加一个父级标签，并设置父级标签隐藏\[此处用的是span标签\]，如果要显示的话则去除父级标签即可。

<script>  
/\*参数说明：  
需被控制的Select对象，  
需显示的option序号(留空则不处理) eg:\[0,1,3\]，  
需隐藏的option序号(留空则不处理) eg:\[2,4,6\]  
\*/  
function toggleOptionShow(obj,arrShow,arrHide)\{  
    function arrHandle(arr,type)\{  
        if($.isArray(arr))\{  
            var len=arr.length;  
            for(i=0;i<len;i++)\{  
                var optionNow=obj.find("option").eq(arr\[i\]);  
                var optionP=optionNow.parent("span");  
                if(type=="show")\{                      
                    if(optionP.size())\{  
                        optionP.children().clone().replaceAll(optionP);   
                    \}                  
                \}else\{  
                    if(!optionP.size())\{  
                        optionNow.wrap("<span style='display:none'></span>");  
                    \}  
                \}  
            \}  
        \}  
    \}  
    arrHandle(arrShow,"show");  
    arrHandle(arrHide,"hide");  
\}  
</script>  
   
<select>  
    <option value="papername" selected="selected">选项一</option>  
    <option value="state">选项二</option>  
    <option value="state">选项三</option>  
    <option value="state">选项四</option>  
    <option value="state">选项五</option>  
    <option value="state">选项六</option>  
</select>  
   
<button οnclick="toggleOptionShow($('select'),'',\[0,1,3\])">隐藏一,二,四</button>  
<button οnclick="toggleOptionShow($('select'),\[0,1,3\],'')">显示一,二,四</button>

原文网址：[https://blog.csdn.net/sanyuedexuanlv/article/details/26455925][https_blog.csdn.net_sanyuedexuanlv_article_details_26455925]

[https_blog.csdn.net_sanyuedexuanlv_article_details_26455925]: https://blog.csdn.net/sanyuedexuanlv/article/details/26455925

发表评论取消回复

表情：

评论列表（有 0 条评论，1167人围观）

还没有评论，来说两句吧...

相关阅读

相关 Spring MVC框架select,option和options标签的使用

代码： selectForm.jsp <%@ page language="java" contentType="text/html; charset=UTF-8

柔情只为你懂/ 2022年10月01日 00:39/ 0 赞/ 162 阅读

相关 javascript中如何获取<select>标签中<option>的值

<script> var z=document.getElementById("test"); z.option\[z.selectedIn

àì夳堔傛蜴生んèń/ 2022年09月30日 06:12/ 0 赞/ 174 阅读

相关使用bBank.js解决IE下select标签innerHTML插入option的BUG

Bug描述：在IE下面使用innerHTML来插入option选项的话，IE会去掉前面的<option>。 var sltObj=document.getElemen

一时失言乱红尘/ 2022年09月25日 10:20/ 0 赞/ 272 阅读

相关解决IE(IE6/IE7/IE8)不兼容HTML5标签的方案

方式一: <!--\[if lt IE9\]> <script> (function() \{ if (! /\@cc\_o

喜欢ヅ旅行/ 2022年07月11日 23:25/ 0 赞/ 407 阅读

相关解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的新标签元素的含义在我的博客里有介绍,这里我就不赘述了. HTML5新标签在IE6/IE7/IE8上并不能识别，需要进行JavaScript处理。以下就介绍几种方式

一时失言乱红尘/ 2022年07月11日 12:04/ 0 赞/ 389 阅读

相关 select 标签的回显

使用struts2标签只需要将s:select 标签提交时的name值与回显表单的name值设置相同，struts2的param拦截器会自动赋值给标签不使用str

╰半夏微凉°/ 2022年06月02日 04:45/ 0 赞/ 444 阅读

相关【解决】SELECT标签中OPTION的显隐控制(兼容IE)

问题描述：在有些功能切换的时候，select标签中的某些option是要被隐藏的。但通过设置option的样式为 display:none根本无法隐藏option标签。

小鱼儿/ 2021年10月13日 01:44/ 1 赞/ 1168 阅读

相关原生js控制盒子显隐

<div class="center">展示内容</div> var paihao = '' showdiv() // 控制内容输

叁歲伎倆/ 2021年07月24日 20:26/ 0 赞/ 415 阅读

相关 Spring MVC的select、option和options标签的使用

一领域模型 1 User package org.fkit.domain; import java.io.Serializable; /

以你之姓@/ 2021年07月24日 11:00/ 0 赞/ 615 阅读

相关 el表达式设置option标签selected

今天早些时候把eclipse升级到了最新版的oxygen（氧气版），然后jsp的校验列出了一系列的错误，红得让人受不了。 ![这里写图片描述][SouthEast] 以前版

红太狼/ 2021年05月10日 11:18/ 0 赞/ 569 阅读