Question

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

Answer 1

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

Answer 2

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

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

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

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

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

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

Answer 4

问题是为什么它可以在任何浏览器中运行？

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

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

Answer 5

作为我的解决方案（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
      }

Answer 6

从select表单中删除一个选项可以使用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 < / em>的

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

Answer 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个尺寸（如多个），但工作正常。这个技巧不在野生动物园下工作:(

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

8 个答案: