IE 9 忽略 select 的选项不显示 [重复]答案

【问题标题】：IE 9 ignores display none for select's option [duplicate]IE 9 忽略 select 的选项不显示 [重复]
【发布时间】：2015-10-02 10:43:24
【问题描述】：

在 Html 中，我使用带选项的 Select。如果您在输入字段中键入，如果选项文本以输入文本开头，则选项将被隐藏或显示。

$(document).on('keyup', '#modal-newSeriennummer', function () {
    var datalist = $('#serialnumbers')[0].options;
    for (var i = 0; i < datalist.length; i++) {
        if (!datalist[i].text.startsWith($(this).val())) {
            $(datalist[i]).hide();
        } else {
            $(datalist[i]).show();
        }
    }

    var onlyVisible = $('#serialnumbers').find('option:visible');

    if (onlyVisible.length == 1) {
        var key = event.keyCode || event.charCode;
        if (key == 8 || key == 46)
            return;
        $('#serialnumbers').val(onlyVisible.val());
        $(this).val(onlyVisible.html());
        GetSpecificHgData(onlyVisible.val());
    } else {
        $('#serialnumbers').val('');
    }
});

HTML：

<input id="modal-newSeriennummer" type="Text" name="newSeriennummern">
<select id="serialnumbers" size="6">
<option value="3bb55850-1884-4f43-85a2-04871ab0a2ff">79523</option>
<option value="dc689af1-abff-4f97-9633-0814d4bbf0ff">19038</option>
<option value="b72c213a-2a81-41d8-8b30-0b14015fb699">29028</option>
<option value="8276cbe9-1394-4448-9b59-0e2e9e9231e4">79193</option>
<option value="0188762d-25ec-41c1-83e2-171cba062050">39259</option>
<option value="e369b23f-3827-4d95-9d90-1b127b0beb8f">22898</option>
</select>

它可以正常工作，但不适用于 IE 9。选项标签的样式为 display none 但它想隐藏。

【问题讨论】：

能否分享整个html代码。
隐藏option 可能不适用于所有浏览器。最好的办法是禁用它们。
您无法在所有浏览器中可靠地隐藏 option 元素。您应该将它们设置为disabled（尽管它们仍然可见）或使用select 样式库，它允许您动态隐藏/显示选项。
我必须把它们藏起来。它可以是数百个元素，用户必须使用输入字段来限制它们。

标签： javascript jquery html css internet-explorer

【解决方案1】：

IE 不支持style="display:none;"

你试过option.hidden = true;而不是option.style.display = 'none'。

你也可以：

$("option_to_hide").wrap('<span/>');
$("option_to_hide").unwrap('<span/>');

具有功能

jQuery.fn.toggleOption = function( show ) {
    $( this ).toggle( show );
    if( show ) {
        if( $( this ).parent( 'span.toggleOption' ).length )
            $( this ).unwrap( );
    } else {
        if( $( this ).parent( 'span.toggleOption' ).length == 0 )
            $( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

并使用它：

$("option_to_toggle").toggleOption(true); // show option
$("option_to_toggle").toggleOption(false); // hide option

【讨论】：

IE 确实支持display: none，只是不支持option 元素。 jQuery 也没有 toggleOption() 方法，所以我不确定你期望它做什么？
抱歉，添加了错误的 jQuery。添加了 $("option_to_hide").wrap('');