style.display ='none'对chrome中的选项标签不起作用，但它在firefox中有效

ok, heres some sample code that demonstrates the problem. if i click the button in firefox, the first option disappears. if i click the button in chrome, nothing happens, or rather if i inspect the first option, it does have the attribute "style='display:none'" but the option itself on the html page is not hidden.

好的，下面是一些演示问题的示例代码。如果我点击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>

why doesn't this work in chrome?

为什么这不适用于chrome？

8 个解决方案

#1

The workaround is to remove the option elements in response to your event and add them back if and when they are needed. IIRC, IE will not allow you to set the display to none on option elements. I would advise storing the removed elements in an array so that you can easily add them back in.

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

#2

You probably have to remove the <option> instead of 'hiding' it. If it's not a solution for you, try disabling it.

您可能必须删除

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

PS: You might want to reconsider using getElementsByTagName('option'), can get messy if you have more <select> elements.

PS：您可能想重新考虑使用getElementsByTagName（'option'），如果您有更多

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

I quickly got it working by simply removing it from its parentNode... obviously this is going to be a hack.
I'll try to find a better solution for you =)

我很快就通过简单地将其从parentNode中移除来实现它...显然这将是一个黑客攻击。我会尝试为你找到更好的解决方案=）

By the way, welcome to Stack Overflow

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

#4

The question is rather why that works in any browser at all?

问题是为什么它适用于任何浏览器？

The options are not used as elements in the page, they contain the information to show in the select element. Some browsers let you apply some styles to the options, but generally you can't really expect cross browser support for any styles at all.

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

If you want to keep an option from being displayed, you just have to remove it from the select.

如果要保持显示选项，只需将其从选择中删除即可。

#5

As my solution (asp.net) .I try to do by that way. 1.Create a dropdowlist will all ListItems 2.Using javscript to add or remove ListItems (Note: add option need same value and text in asp:dropdowlist items)

作为我的解决方案（asp.net）。我试着这样做。 1.创建所有ListItems的dropdowlist 2.使用javscript添加或删除ListItems（注意：在asp：dropdowlist项目中添加选项需要相同的值和文本）

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
      }

#6

For deleting of one option from select form may be used jQuery's $().eq().remove() or $().remove().

要从select表单中删除一个选项，可以使用jQuery的$（）。eq（）。remove（）或$（）。remove（）。

Similar was my deleting of one table row from table:

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

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

where:

哪里：

$('form table tr')

say that removed element will be table row (tr) from table enclosed in form (form table).

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

eq(1)

say that removed will be the second element (element with index number 1)

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

remove()

say that element will be removed.

说该元素将被删除。

But when this should be used on option, then all needed would be (for example):

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

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

because it is simplier to find option by value than by index number (unless you would have more ioption with the same value - but it is nonsense, to have such options). Using of index number is good if you have not any else that you may use to find removed element.

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

Also you may, of course, add form name or form name and select name (or id, or class) into element identification

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

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

but the first option is better - and more logical, due to server-side processes, where you need to use attribute name instead id or class.

但是第一个选项更好 - 更合乎逻辑，因为服务器端进程需要使用属性名称而不是id或类。

#7

I know this is now old, but you could - especially if you are using jQuery change parent.

我知道这已经过时了，但你可以 - 特别是如果你使用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

Solution:

解：

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;

The select box changed to 2 size (like multiple), but working. This trick don't working under safari :(

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

#1

#2