style.display='none' 不适用于 chrome 中的选项标签，但在 Firefox 中有效答案

【问题标题】：style.display='none' doesn't work on option tags in chrome, but it does in firefoxstyle.display='none' 不适用于 chrome 中的选项标签，但在 Firefox 中有效
【发布时间】：2019-07-03 22:17:42
【问题描述】：

好的，这里有一些演示问题的示例代码。如果我单击 Firefox 中的按钮，第一个选项就会消失。如果我单击 chrome 中的按钮，则没有任何反应，或者更确切地说，如果我检查第一个选项，它确实具有属性“style='display:none'”，但 html 页面上的选项本身并未隐藏。

<form>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="button" onclick="document.getElementsByTagName('option')[0].style.display='none'" value="hide option 1">
</form>

为什么这在 chrome 中不起作用？

【问题讨论】：

现在可以在 Chrome 上运行。 IE 像往常一样排在最后，仍然给我们带来不必要的头痛。

标签： javascript firefox coding-style google-chrome

【解决方案1】：

解决方法是删除 option 元素以响应您的事件，并在需要时将它们添加回来。 IIRC，IE 不允许您在 option 元素上将 display 设置为 none。我建议将删除的元素存储在一个数组中，以便您可以轻松地将它们重新添加。

【讨论】：

有趣的事实是，Chrome Canary（至少 40.0.2179.0）尊重 display:none 选项。我认为 Firefox 也可以。
@GEverding Firefox 最初不会显示该元素，但您仍然可以使用键盘选择隐藏的元素（此时它们将显示）。你可以在这里测试它：jsfiddle.net/gefz928j。底线是您不应该使用display:none 从列表中删除选项。
@JonathanSampson，当删除是临时的时，您应该这样做。删除display:none 比重新附加整个列表要快得多。
Chrome 现在在发布版本中支持 display:none。不过，有趣的是，当设置为不显示时，

【解决方案2】：

您可能必须删除<option> 而不是“隐藏”它。如果它不适合您，请尝试禁用它。

document.getElementsByTagName('option')[0].disabled='disabled'

PS：您可能需要重新考虑使用 getElementsByTagName('option')，如果您有更多 <select> 元素，可能会变得混乱。

【讨论】：

只是用那个命令作为一个简单的例子来演示问题

【解决方案3】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
removeIt = function()
{
    var theSelect = document.getElementById("theSelect");
    var theOption = document.getElementById("theOption");
    theSelect.removeChild(theOption);
};
</script>
</head>
<body>
<select id="theSelect">
<option>1</option>
<option id="theOption">2</option>
<option>3</option>
</select>
<input type="button" onclick="removeIt()" value="remove it!"/>
</body>
</html>

我通过简单地从其父节点中删除它来快速让它工作......显然这将是一个黑客。
我会尽力为您找到更好的解决方案 =)

顺便说一句，欢迎来到 Stack Overflow

【讨论】：

它不会删除它。它只是从父节点中删除它。您可以稍后调用 theSelect.appendChild(theOption); ..虽然这可能会搞砸顺序 [在我的示例中它将变为 1、3、2] 仍在尝试考虑解决方案。
更新：很遗憾，我想不出更好的方法。也许，当您第一次执行 removeChild() 选项时，您可以将 childNodes 复制到另一个数组，这样您就可以保持秩序。然后，当您重新附加时，您必须删除所有内容并重新附加所有内容。效率低，但我想不出更好的方法>_>

【解决方案4】：

问题是为什么它在任何浏览器中都有效？

选项不用作页面中的元素，它们包含要在选择元素中显示的信息。某些浏览器允许您将某些样式应用于选项，但通常您根本无法真正期望跨浏览器支持任何样式。

如果您不想显示某个选项，只需将其从选择中删除即可。

【讨论】：

为什么投反对票？如果你不说你不喜欢什么，那是无法改善答案的。
根据 HTML 规范 display 属性适用于所有元素，包括 option 和 optgroup。
@Denis Otkidach：是的，在 HTML 中，但这不再是 HTML，它是 DOM 中的对象。您必须用新的 HTML 替换整个 select 元素才能再次对其进行解析。

【解决方案5】：

要从选择表单中删除一个选项，可以使用 jQuery 的 $().eq().remove() 或 $().remove()。

类似的是我从表格中删除了一个表格行：

$('form table tr').eq(1).remove();

地点：

$('form table tr')

说删除的元素将是表格（表格）中包含的表格中的表格行（tr）。

eq(1)

说移除的将是第二个元素（索引号为 1 的元素）

remove()

说该元素将被删除。

但是当这应该用于选项时，那么所有需要的将是（例如）：

$('select option[value="1"]').remove();

因为按值查找选项比按索引号更简单（除非您有更多具有相同值的 ioption - 但拥有这样的选项是无稽之谈）。如果您没有任何其他可用于查找已删除元素的索引号，则使用索引号很好。

当然，您也可以在元素标识中添加表单名称或表单名称并选择名称（或 id 或类）

$('form[name="date"] selection[name="day"] option[value="1"]').remove();
$('form#date selection#day option[value="1"]').remove();

但第一个选项更好 - 并且更合乎逻辑，由于服务器端进程，您需要使用属性 name 而不是 id 或 class。

【讨论】：

$('select option[value="1"]').remove(); 正在工作

【解决方案6】：

由于我的解决方案是（asp.net），我会尝试这样做。

创建一个下拉列表将所有ListItems
使用 javascript 添加或删除 ListItems（注意：添加选项需要与 asp:dropdownlist 项中的值和文本相同）

function removeOptionSelected() {
    var ddl = document.getElementById('ddl_DropList');
    var i;
    for (i = ddl.length - 1; i >= 0; i--) {

        ddl.remove(i);
    }
}
function addOptions3() {
    removeOptionSelected();
    var ddl = document.getElementById('ddl_DropList');
    var elOptNew = document.createElement('option');

    elOptNew.text = 'Monthly Top Producer(Project)';
    elOptNew.value = 'GCE';
    try {
        ddl.add(elOptNew, null); // standards compliant; doesn't work in IE
    }
    catch (ex) {
        ddl.add(elOptNew); // IE only
    }
    elOptNew = document.createElement('option');
    elOptNew.text = 'Monthly Top Leaders - DD';
    elOptNew.value = 'DRE';
    try {
        ddl.add(elOptNew, null); // standards compliant; doesn't work in IE
    }
    catch (ex) {
        ddl.add(elOptNew); // IE only
    }
    elOptNew = document.createElement('option');
    elOptNew.text = 'Monthly Top Leaders - SDD';
    elOptNew.value = 'DRESDD';
    try {
        ddl.add(elOptNew, null); // standards compliant; doesn't work in IE
    }
    catch (ex) {
        ddl.add(elOptNew); // IE only
    }
    elOptNew = document.createElement('option');
    elOptNew.text = 'Monthly Top Leaders - GD';
    elOptNew.value = 'GRE';
    try {
        ddl.add(elOptNew, null); // standards compliant; doesn't work in IE
    }
    catch (ex) {
        ddl.add(elOptNew); // IE only
    }
}

【讨论】：

【解决方案7】：

我知道这已经过时了，但你可以 - 特别是如果你使用 jQuery 更改父级。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo Page</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>

            function sourceListChange() {
                var oVisible = $('#destList');
                var newCategory = $( "#sourceList" ).val()||'';
                var oToShow = $();

                oHiddenDestList.append(oVisible.find('option'));

                if (newCategory) {
                    oToShow = oHiddenDestList.find('.'+newCategory);
                }           

                if (oToShow.length==0) {
                    oVisible.append (oHiddenDestList.find('.NA'));
                } else if (oToShow.length!=1) {
                    oVisible.append (oHiddenDestList.find('.SELECT'));
                }
                oVisible.prop('selectedIndex', 0);

                oVisible.append (oToShow);
            }

            $(document).ready(function() {
                sourceListChange();
            });

            var oHiddenDestList = $(document.createElement('select'));

        </script>
        <style>

        </style>
    </head>

    <body>

        Select a parent group:
        <select id="sourceList" onchange="sourceListChange()">
            <option class="SELECT" value="" selected disabled>Please Select</option>
            <option value="veg">Vegetables</option>
            <option value="fruit">Fruit</option>
        </select>

        <select id="destList">
            <option class="SELECT" value="*" selected disabled>Please Select</option>
            <option class="NA" value="" selected disabled>Not Applicable</option>
            <option class="fruit">Apple</option>
            <option class="fruit">Bannana</option>
            <option class="veg">Carrot</option>
            <option class="veg">Pea</option>
        </select>       
    </body>
</html>

【讨论】：

【解决方案8】：

解决方案：

var ua = navigator.userAgent.toLowerCase();

var check = function(r) { return r.test(ua);};

var isChrome = check(/chrome/);
`
var f=document.getElementById('select_tag_id');

f.options[i].style.display='none';

if (isChrome) f.size=2;

选择框更改为 2 大小（如多个），但可以正常工作。这个技巧在 safari 下不起作用:(

【讨论】：