Javascript style.display='none' 不适用于 chrome 中的选项标签，但它适用于 Firefox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2324250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
style.display='none' doesn't work on option tags in chrome, but it does in firefox
提问by user280109
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 中不起作用？
采纳答案by Russ Cam
The workaround is to remove the optionelements in response to your event and add them back if and when they are needed. IIRC, IE will not allow you to set the displayto noneon optionelements. I would advise storing the removed elements in an array so that you can easily add them back in.
解决方法是删除option元素以响应您的事件，并在需要时将它们添加回来。IIRC，IE 将不允许您在元素上设置displayto 。我建议将删除的元素存储在一个数组中，以便您可以轻松地将它们添加回来。noneoption
回答by o.k.w
You probably have to remove the <option>instead of 'hiding' it. If it's not a solution for you, try disabling it.
您可能必须删除<option>而不是“隐藏”它。如果这不是您的解决方案，请尝试禁用它。
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'), 如果您有更多<select>元素，可能会变得混乱。
回答by Warty
<!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
回答by Guffa
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.
这些选项不用作页面中的元素，它们包含要在选择元素中显示的信息。某些浏览器允许您将某些样式应用于选项，但通常您根本无法真正期望跨浏览器支持任何样式。
If you want to keep an option from being displayed, you just have to remove it from the select.
如果您想不显示某个选项，只需将其从选择中删除即可。
回答by nguyencaoan
As my solution is (asp.net), I will try to do it by that way.
因为我的解决方案是 (asp.net)，所以我会尝试这样做。
- Create a dropdowlist will all ListItems
- Using javascript to add or remove ListItems (Note: add option need same value and text in asp:dropdownlist items)
- 创建一个下拉列表将所有 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
}
}
回答by Václav
For deleting of one option from select form may be used jQuery's $().eq().remove() or $().remove().
要从选择表单中删除一个选项，可以使用 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 nameinstead idor class.
但是第一个选项更好 - 而且更合乎逻辑，因为服务器端进程，您需要使用属性名称而不是id或class。
回答by Denzil Newman
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>
回答by Attila Molnár
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 下不起作用:(
