style.display ='none'在chrome中的选项标签上不起作用,但是它在firefox中

好吧,inheritance人一些示例代码,说明问题。 如果我点击在Firefox中的button,第一个选项消失。 如果我点击铬中的button,什么都不会发生,或者更确切地说,如果我检查第一个选项,它确实具有属性“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> 

为什么这不工作在铬?

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

您可能必须删除<option>而不是“隐藏”它。 如果这不是您的解决scheme,请尝试禁用它。

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

PS:你可能想重新考虑使用getElementsByTagName('option') ,如果你有更多的<select>元素,会变得杂乱无章。

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

我很快就通过从父节点中删除它来工作…显然,这将是一个黑客攻击。
我会尽力为你find一个更好的解决scheme=)

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

问题是,为什么在任何浏览器都有效?

这些选项不被用作页面中的元素,它们包含要在select元素中显示的信息。 一些浏览器可以让你在选项中应用一些样式,但是一般来说,你不能真正期望跨浏览器支持任何样式。

如果你想保持显示选项,你只需要从select中删除它。

作为我的解决scheme(asp.net)。我试图这样做。 1.创build一个dropdowlist将所有ListItems 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 } 

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

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

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

哪里:

 $('form table tr') 

说删除的元素将从表格(表格)中包含的表格中的表格行(tr)。

 eq(1) 

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

 remove() 

说元素将被删除。

但是,当这个选项应该被使用,那么所有需要的将是(例如):

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

因为按价值比索引号find选项更简单(除非你有更多的select具有相同的价值 – 但这是无稽之谈,有这样的select)。 如果您没有其他可用于查找移除的元素的索引号,则使用索引号是很好的。

当然,您也可以添加表单名称或表单名称,并将名称(或ID或类别)select为元素标识

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

但是第一种select是更好的 – 更合乎逻辑的是,由于服务器端的stream程,你需要使用属性名称而不是idclass

我知道这是现在老了,但你可以 – 特别是如果你正在使用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> 

解:

 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; 

select框更改为2(如多个),但工作。 这个技巧不能在safari下工作:(