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程，你需要使用属性名称而不是id或class 。
我知道这是现在老了，但你可以 – 特别是如果你正在使用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下工作:(
