堆棧內存溢出
  簡體   English   中英

style.display='none' 不適用於 chrome 中的選項標簽，但它適用於 Firefox

[英]style.display='none' doesn't work on option tags in chrome, but it does in firefox

 原文  2010-02-24 07:04:18  0   8    javascript/ firefox/ coding-style/ google-chrome

問題描述

好的，這是一些演示問題的示例代碼。 如果我單擊 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 中不起作用？

8 個解決方案

解決方案1
 24 已采納  2010-02-24 07:10:05

解決方法是刪除option元素以響應您的事件，並在需要時將它們添加回來。 IIRC，IE 不允許您將option元素的display設置為none 。 我建議將刪除的元素存儲在一個數組中，以便您可以輕松地將它們添加回來。

解決方案2
 7  2010-02-24 07:16:42

您可能必須刪除<option>而不是“隱藏”它。 如果這不是您的解決方案，請嘗試禁用它。

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

PS：您可能需要重新考慮使用getElementsByTagName('option') ，如果您有更多<select>元素，可能會變得混亂。

解決方案3
 2  2010-02-24 07:09:58

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

解決方案4
 1  2014-02-03 08:44:54

要從選擇表單中刪除一個選項，可以使用 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();

但是第一個選項更好 - 而且更合乎邏輯，因為服務器端進程，您需要使用屬性名稱而不是id或class 。

解決方案5
 1  2010-02-24 07:29:36

問題是為什么這在任何瀏覽器中都有效？

這些選項不用作頁面中的元素，它們包含要在選擇元素中顯示的信息。 某些瀏覽器允許您將某些樣式應用於選項，但通常您根本無法真正期望跨瀏覽器支持任何樣式。

如果您想不顯示某個選項，只需將其從選擇中刪除即可。

解決方案6
 1  2011-10-06 09:46:04

因為我的解決方案是 (asp.net)，所以我會嘗試這樣做。

  1. 創建一個下拉列表將所有 ListItems
  2. 使用 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
 0  2014-11-11 14:02:19

我知道這現在已經過時了，但是您可以 - 特別是如果您使用 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
 0  2015-02-24 18:23:20

解決方案：

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 下不起作用:(

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 style.display=“無”； 不適用於 javascript DOM 為什么它不起作用，style.display 為什么Style.Display = None無法使我的按鈕不可見？ Javascript：style.display：&#39;block&#39;不起作用 Javascript style.display 有時不起作用 document.getElementById（）。style.display =&#39;none&#39;; 僅適用於Firefox getElementById（）。style.display不起作用 <li>設置樣式時不顯示標簽。display = none 為什么這個style.display不起作用？ style.display =“none”無效
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM