Question

我想隐藏select标签的选项，下面是我编写的代码。这适用于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中尝试了很多答案，但没有运气。我不想为了简单的css而不必要地去jquery。

编辑：我不希望下拉列表出现

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替换select元素的html。正如你在下面的jsfiddle中看到的那样。 Hide options in select element, not working in IE?

＆＃13;

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

＆＃13;

            option{
                display:none !important;
            }

＆＃13;

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

＆＃13;

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

Answer 4

试试这个：

#selectid { 
   display: none !important;
}

它在IE 11上对我有用。

Answer 5

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

option#id { visibility: hidden; }

Answer 6

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

风格=“显示：无;＆GT;

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

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

6 个答案: