如何使用 JavaScript 隐藏选择选项？（跨浏览器）答案

【问题标题】：How can I hide select options with JavaScript? (Cross browser)如何使用 JavaScript 隐藏选择选项？（跨浏览器）
【发布时间】：2011-05-22 21:18:54
【问题描述】：

这应该可行：

$('option').hide(); // hide options

它适用于 Firefox，但不适用于 Chrome（可能不适用于 IE，未经测试）。

一个更有趣的例子：

<select>
    <option class="hide">Hide me</option>
    <option>visible option</option>
</select>
<script type="text/javascript">
// try to hide the first option
$('option.hide').hide();

// to select the first visible option
$('option:visible').first().attr('selected', 'selected');
</script>

或查看http://jsfiddle.net/TGxUf/的示例

是从 DOM 中分离选项元素的唯一选择吗？我需要稍后再展示它们，所以这不会很有效。

【问题讨论】：

你可以使用 $('option:visible:first') 代替 $('option:visible').first()
对于现在遇到这个问题的任何人，请注意发布的代码确实在 Chrome 和 Firefox 中工作（尚未测试 IE）。
:visible 选择器不适用于<option>s。引用该文档，“所有option 元素都被认为是隐藏的，无论它们的selected 状态如何。”

标签： javascript jquery cross-browser

【解决方案1】：

很遗憾，您无法在所有浏览器中隐藏option 元素。

过去当我需要这样做时，我已经设置了他们的disabled 属性，就像这样......

$('option').prop('disabled', true);

然后我在浏览器支持的地方使用了隐藏，使用这段 CSS...

select option[disabled] {
    display: none;
}

【讨论】：

这是一个好的开始，但我确实需要在所有浏览器中删除这些选项。
@dave1010 您唯一的选择是构建options 的对象，并根据需要删除和附加。
如果这个答案不清楚。在 Firefox、Chrome 和 Edge 但在 IE 或 Safari（2018/2019）中禁用和显示无效
在回答另一个问题stackoverflow.com/questions/57511712/…时做了一个简单的JS演示sn-p
hidden? stackoverflow.com/a/24516786, caniuse.com/#feat=hidden

【解决方案2】：

如前所述，您不能 display:none 单个 <option>s，因为它们不是正确的 DOM 元素。

您可以设置.prop('disabled', true)，但这只会使元素变灰并使它们无法选择——它们仍然占用空间。

我使用的一个解决方案是在页面加载时将.detach() 和<select> 添加到全局变量中，然后只根据需要添加回<option>s。像这样的东西（http://jsfiddle.net/mblase75/Afe2E/）：

var $sel = $('#sel option').detach(); // global variable

$('a').on('click', function (e) {
    e.preventDefault();
    var c = 'name-of-class-to-show';
    $('#sel').empty().append( $sel.filter('.'+c) );
});

起初我以为你必须先.clone() <option>s 才能附加它们，但显然不是。运行click 代码后，原来的全局$sel 不变。

如果您不喜欢全局变量，您可以将包含选项的 jQuery 对象作为 .data() 变量存储在 <select> 元素本身 (http://jsfiddle.net/mblase75/nh5eW/) 上：

$('#sel').data('options', $('#sel option').detach()); // data variable

$('a').on('click', function (e) {
    e.preventDefault();
    var $sel = $('#sel').data('options'), // jQuery object
        c = 'name-of-class-to-show';
    $('#sel').empty().append( $sel.filter('.'+c) );
});

【讨论】：

感谢您的回答，对我帮助很大。当您拥有完整的跨浏览器解决方案时总是很好。恕我直言，这应该是公认的答案
这对我有帮助，关键是使用 $.detach()（或 $.remove()）来实现最大的跨浏览器兼容性，而不是 $.hide()

【解决方案3】：

我自己尝试了一下，这就是我想出的：

(function($){

    $.fn.extend({detachOptions: function(o) {
        var s = this;
        return s.each(function(){
            var d = s.data('selectOptions') || [];
            s.find(o).each(function() {
                d.push($(this).detach());
            });
            s.data('selectOptions', d);
        });
    }, attachOptions: function(o) {
        var s = this;
        return s.each(function(){
            var d = s.data('selectOptions') || [];
            for (var i in d) {
                if (d[i].is(o)) {
                    s.append(d[i]);
                    console.log(d[i]);
                    // TODO: remove option from data array
                }
            }
        });
    }});   

})(jQuery);

// example
$('select').detachOptions('.removeme');
$('.b').attachOptions('[value=1]');');

您可以在http://www.jsfiddle.net/g5YKh/查看示例

option 元素已从 selects 中完全删除，并且可以通过 jQuery 选择器再次重新添加。

在它适用于所有情况之前可能需要一些工作和测试，但它足以满足我的需要。

【讨论】：

我真的不想接受自己的答案，但除非有人想出更好的办法，否则我可能不得不:-)
在 IE8 上运行时，我遇到了 dave1010 的回答问题。 attachOptions 函数中的 if (d[i].is(o)) 调用导致“对象不支持此属性或方法”消息。
这是完成“TODO”部分的方法。您必须将 for 循环更改为“for (var i = 0; i

【解决方案4】：

我知道这有点晚了，但迟到总比没有好！这是实现这一目标的一种非常简单的方法。只需具有显示和隐藏功能。 hide 函数只会将每个选项元素附加到预定的（隐藏的）跨度标签（应该适用于所有浏览器），然后 show 函数只会将该选项元素移回您的选择标签。 ;)

function showOption(value){
    $('#optionHolder option[value="'+value+'"]').appendTo('#selectID');             
}

function hideOption(value){
    $('select option[value="'+value+'"]').appendTo('#optionHolder');
}

【讨论】：

有趣的想法。我猜临时容器甚至不必附加到 DOM（例如，只需使用 document.createElement() 创建）。
不知道为什么这个安德烈被否决了。它确实解决了这个问题，而且做得很好。

【解决方案5】：

隐藏<option> 元素不在规范中。但是你可以disable他们，这应该可以跨浏览器工作。

$('option.hide').prop('disabled', true);

http://www.w3.org/TR/html401/interact/forms.html#h-17.6

【讨论】：

【解决方案6】：

您可以尝试将选项元素包装在 span 中，这样它们就不会可见，但仍会加载到 DOM 中。如下所示

jQ('#ddlDropdown option').wrap('<span>');

并解开包含'selected'属性的选项，如下所示显示已选择的选项。

var selectedOption = jQ('#ddlDropdown').find("[selected]");
jQ(selectedOption).unwrap();

这适用于所有浏览器。

【讨论】：

【解决方案7】：

这是一个选项：

适用于所有浏览器
过滤时保留当前选择
删除/恢复时保留项目的顺序
没有肮脏的黑客行为/无效的 HTML

$('select').each(function(){
    var $select = $(this);
    $select.data('options', $select.find('option'));
});
    
function filter($select, search) {
    var $prev = null;
    var $options = $select.data('options');
    search = search.trim().toLowerCase();
    $options.each(function(){
        var $option = $(this);
        var optionText = $option.text();
        if(search == "" || optionText.indexOf(search) >= 0) {
            if ($option.parent().length) {
                $prev = $option;
                return;
            }
            if (!$prev) $select.prepend($option);
            else $prev.after($option);
            $prev = $option;
        } else {
            $option.remove();
        }
    });
}

JSFiddle：https://jsfiddle.net/derrh5tr/

【讨论】：

我在这一行添加了一个 .toLowerCase()： var optionText = $option.text();

【解决方案8】：

晚了三年，但我的谷歌搜索把我带到了这里，所以希望我的回答对其他人有用。

我刚刚创建了第二个选项（我用 CSS 隐藏了它）并使用 Javascript 在它们之间来回移动 s。

<select multiple id="sel1">
  <option class="set1">Blah</option>
</select>
<select multiple id="sel2" style="display:none">
  <option class="set2">Bleh</option>
</select>

类似的东西，然后类似的东西会将一个项目移动到列表中（即，使其可见）。显然根据您的目的调整代码。

$('#sel2 .set2').appendTo($('#sel1'))

【讨论】：

【解决方案9】：

在纯 JS 上：

let select = document.getElementById("select_id")                   
let to_hide = select[select.selectedIndex];
to_hide.setAttribute('hidden', 'hidden');

仅取消隐藏

to_hide.removeAttr('hidden');

或

to_hide.hidden = true;   // to hide
to_hide.hidden = false;  // to unhide

【讨论】：

removeAttribute 应该是 removeAttr

【解决方案10】：

如果你保留对象并在短时间内过滤它是可能的。

<select id="driver_id">
<option val="1" class="team_opion option_21">demo</option>
<option val="2" class="team_opion option_21">xyz</option>
<option val="3" class="team_opion option_31">ab</option>
</select>

-

team_id= 31;

var element = $("#driver_id");
originalElement = element.clone();  // keep original element, make it global


element.find('option').remove();   
originalElement.find(".option_"+team_id).each(function() { // change find with your needs
        element.append($(this)["0"].outerHTML); // append found options
});

https://jsfiddle.net/2djv7zgv/4/

【讨论】：

【解决方案11】：

这是@NeverEndingLearner 答案的增强版：

完整的浏览器支持不使用不受支持的 CSS
保留职位
没有多重包装

$("#hide").click(function(){
  $("select>option.hide").wrap('<span>'); //no multiple wrappings
});

$("#show").click(function(){
  $("select span option").unwrap(); //unwrap only wrapped
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<select>
    <option class="hide">Hide me</option>
    <option>visible option</option>
</select>
<button id="hide">hide</button>
<button id="show">show</button>

【讨论】：

【解决方案12】：

由于您提到稍后要重新添加选项，我建议您在页面加载时使用选择框的内容加载一个数组或对象 - 这样您始终拥有一个“主列表”如果需要恢复原始选择。

我做了一个简单的例子，它删除了选择中的第一个元素，然后一个恢复按钮将选择框恢复到原来的状态：

http://jsfiddle.net/CZcvM/

【讨论】：

这是个好主意。不幸的是，您提供的代码示例无法在 Firefox 中运行。最好有一个灵活的 jQuery 插件，它可以通过任意选择器删除和重新附加 option 元素。

【解决方案13】：

试试这个：

$(".hide").css("display","none");

但我认为隐藏它没有意义。如果你想删除它，只需：

$(".hide").remove();

【讨论】：

我认为option 没有display 属性。此外，他说他需要稍后再显示options，所以remove() ing 他们并且不保留返回它们的方式对OP没有用。
@alex：谢谢你提醒我。我只是打字太快了。我想输入 css 代替....谢谢！！
我同意，如果列表中有您不总是想要的项目，请将其作为选项列表的一部分，生成选择标签，然后在正确的情况下，删除该选项你想隐藏。

【解决方案14】：

只需根据我的需要修改 dave1010 的代码

 (function($){
    $.fn.extend({hideOptions: function() {
        var s = this;
        return s.each(function(i,e) {
            var d = $.data(e, 'disabledOptions') || [];
            $(e).find("option[disabled=\"disabled\"]").each(function() {
                d.push($(this).detach());
            });
            $.data(e, 'disabledOptions', d);
        });
    }, showOptions: function() {
        var s = this;
        return s.each(function(i,e) {       
            var d = $.data(e, 'disabledOptions') || [];
            for (var i in d) {
                $(e).append(d[i]);
            }
        });
    }});    
})(jQuery);

http://jsfiddle.net/AbzL3/1/

【讨论】：

【解决方案15】：

我以为我很聪明;-)

在 CSS 中：

option:disabled {display:none;}

在 Firefox 和 Chrome 中，创建了一个仅包含已启用选项的选择。不错。

在 IE 中，已启用的选项会在其原始位置显示，而禁用的选项仅显示空白行。不好。

在 Edge 中，启用的选项显示在顶部，后面是禁用选项的空白行。可以接受。

【讨论】：

【解决方案16】：

document.getElementById('hide').style.visibility='hidden';

我在这里使用了 id 作为选项

【讨论】：