如何使用JavaScript隐藏选择选项？(跨浏览器)

Question

这应该工作:

$('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分离选项元素的唯一选择吗？我需要稍后再次展示它们,所以这不会很有效.

Answer 1

不幸的是,您无法option在所有浏览器中隐藏元素.

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

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

然后我使用隐藏它在浏览器中支持它使用这块CSS ...

select option[disabled] {
    display: none;
}

Answer 2

如前所述,你不能display:none个人<option>,因为他们不是正确的DOM元素.

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

一个解决方法我用的是.detach()在<select>进入页面加载一个全局变量,然后添加回的只有<option>你想按需秒.像这样的东西(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>小号追加在他们面前,但显然不是.代码运行$sel后,原始全局不会发生变化click.

如果你厌恶全局变量,你可以将包含选项的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) );
});

Answer 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选择再次重新添加.

可能需要一些工作和测试才能适用于所有情况,但它足以满足我的需求.

Answer 4

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

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

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

Answer 5

我知道这有点晚了但迟到总比没有好!这是实现这一目标的一种非常简单的方法.只需一个显示和隐藏功能.hide函数只是将每个选项元素附加到预定的(隐藏的)span标记(应该适用于所有浏览器),然后show函数将把该选项元素移回到select标记中.;)

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

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

Answer 6

这是一个选项：

• 适用于所有浏览器
• 过滤时保留当前选择
• 删除/恢复时保留项目的顺序
• 没有肮脏的黑客/无效的 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/

Answer 7

您可以尝试将选项元素包装在一个范围内，以使它们不会可见，但仍会加载到DOM中。像下面

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

然后按如下所示解开包含“ selected”属性的选项，以显示已选择的选项。

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

这适用于所有浏览器。

Answer 8

在纯 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