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

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将不允许您设置displayto noneon option元素.我建议将删除的元素存储在一个数组中,以便您可以轻松地将它们添加回来.

Answer 2

你可能不得不删除<option>而不是"隐藏"它.如果它不适合您,请尝试禁用它.

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

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