如何在 IE 中使用 css 隐藏选择选项？

Question

我想隐藏选择标签的选项，下面是我编写的代码。这适用于 Chrome 和 Firefox，但不适用于 IE。

<style>
            option{
                display:none !important;
            }
</style>

<select style="width:400px" id="selectid" >
            <option id="result1" value="Select" >Select</option>
            <option disabled value="abcd" >abcd</option>
            <option disabled value="abcd" >abcd</option>
            <option disabled value="abcd" >abcd</option>
            <option disabled value="abcd" >abcd</option>
</select>

是否有任何简单的 CSS 样式可以隐藏它？我在stackoverflow中尝试了很多答案，但没有运气。我不想不必要地去 jquery 做一个简单的 css 东西。

编辑：我不希望出现下拉菜单

Answer 1

使用隐藏：

<option value="" hidden></option>

Answer 2

我在 CSS 中隐藏了原始选择表，并为“过滤结果”添加了一个补充选择表。 我只是使用 javascript/jQuery 将相关选项移动到过滤后的结果元素。

适用于所有浏览器。 HTML：

<div id="banner-message">
    <h4>Filter available color variants based on selected color category.</h4>
    <p>Select color category:</p>
    <select id="category">
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="blue">blue</option>
    </select>

    <p>Select color variant</p>
    <select id="varint_full" style="display: none;">
        <option class="red green blue" value="none">No variant</option>
        <option class="red" value="indianred">Indian red</option>
        <option class="red" value="orangered">Orange red</option>
        <option class="red" value="darkred">Dark red</option>
        <option class="green" value="forestgreen">Forest green</option>
        <option class="green" value="lime">Lime</option>
        <option class="green" value="lightseagreen">Light sea green</option>
        <option class="blue" value="blueviolet">Blue violet</option>
        <option class="blue" value="cornflowerblue">Corn flower blue</option>
        <option class="blue" value="lightskyblue">Light sky blue</option>
    </select>
    <select id="variant_filtered">

    </select>

</div>

JavaScript：

function filterVariant() {
    // Reset filters
    $('select#variant_filtered option').appendTo('select#varint_full')

    // Apply new filters
    var category = $('select#category').val()
    $('select#varint_full option.' + category).appendTo('select#variant_filtered')
    $('select#variant_filtered').val('none')

    changeColor()
}

function changeColor() {
    // Apply style change
    var filtered_color = $('select#variant_filtered').val()
    var category = $('select#category').val()

    $('select').css({
        'background-color': (filtered_color == 'none') ? category : filtered_color
    })
}

filterVariant()
$('#category').change(function() {
    filterVariant()
})
$('#variant_filtered').change(function() {
    changeColor()
})

JSFIDDLE：根据选定的颜色类别过滤可用的颜色变体。 https://jsfiddle.net/Znote/exdcaqtv/2/

Answer 3

这就是你要找的。选项不能在 IE 浏览器中隐藏，只能禁用。 另一种选择是将选择元素的 html 替换为空 html。正如您在下面的 jsfiddle 中看到的那样。 Hide options in select element, not working in IE?

$("#selectid:not(#selectid:first-child)").html("");

            option{
                display:none !important;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select style="width:400px" id="selectid" >
            <option id="result1" value="Select" >Select</option>
            <option disabled value="abcd" >abcd</option>
            <option disabled value="abcd" >abcd</option>
            <option disabled value="abcd" >abcd</option>
            <option disabled value="abcd" >abcd</option>
</select>

这里是 js 小提琴：- http://jsfiddle.net/bj5fqj11/3/

Answer 4

试试这个：

#selectid { 
   display: none !important;
}

它适用于 IE 11。

Answer 5

以下代码部分为我工作（在 IE 中）：

option#id { visibility: hidden; }

Answer 6

您没有在引号中关闭样式值。看：

style=“显示：无；>

所以如果你在后面加上双引号：display:none;它应该工作。