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

Posted 2023-03-04

【中文标题】如何在 IE 中使用 css 隐藏选择选项？

【英文标题】：How to hide select options using css in IE?

【发布时间】：2015-06-23 18:32:11

【问题描述】：

我想隐藏选择标签的选项，下面是我编写的代码。这适用于 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 样式可以隐藏它？我在***中尝试了很多答案，但没有运气。我不想不必要地去 jquery 做一个简单的 css 东西。

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

【问题讨论】：

您不希望下拉菜单出现歧义，您指的是选项还是选择元素本身？

【参考方案1】：

使用隐藏：

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

【讨论】：

在任何人选择recommend deletion 之前，这是一个有效的尝试答案。此帖子不应被标记，也不应建议在 LQPRQ 中删除。请参阅：You're doing it wrong: A plea for sanity in the Low Quality Posts queue 和 Your answer is in another castle: when is an answer not an answer?

2 个月前，我因为将类似的答案标记为“看起来不错”而被暂停审查，这也是一个尝试性的答案

@bonner 它不一定要成为一个尝试的答案。它提出了一个解决方案，但它可能是错误的。随意投反对票

【参考方案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/

【参考方案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/

【讨论】：

您可以在IE中打开您评论过的链接。它没有隐藏选项。

【参考方案4】：

试试这个：

#selectid  
   display: none !important;

它适用于 IE 11。

【参考方案5】：

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

option#id visibility: hidden;

【参考方案6】：

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

style=“显示：无；>

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

【讨论】：

我没有使用内联样式