在回答另一个问题,我碰到这种怪异的错误。 快速搜索并没有发现现有的问题,所以这里有云:
的jsfiddle: http://jsfiddle.net/TrueBlueAussie/93D3h/4/
<select>
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
<option class="hidden">Item4</option>
<option class="hidden">Item5</option>
</select>
CSS:
.hidden {
display: none;
}
问:为什么Item5
始终显示,即使为隐藏它的样式? Item4
是不可见的。 注:我在Chrome的最新版本测试此。
更新:
不同的人越来越在不同的浏览器不同的结果。 以下内容(从下面的答案)适用于Chrome,但不是最新的IE(包括项目4和项目5所示):
.hidden {
visibility: hidden;
}
原来,这个问题一直打到之前(惊讶): 如何隐藏的CSS一个<select>菜单中的<选项>? 但令人惊讶的是,浏览器不支持与造型移除选项。 去搞清楚!
造型OPTION
使用CSS元素是不是因为用户代理执行这一非常不同和非标准的可靠解决方案。 我不会把这个错误,因为没有style
的规格为属性定义OPTION
元素: http://www.w3.org/TR/html401/interact/forms.html#h-17.6
您可以使用disabled
属性,而不是:
<select>
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
<option disabled>Item4</option>
<option disabled>Item5</option>
</select>
和/或使用JavaScript操作DOM。 一个漂亮的开门红。将针对disabled
的语义后备元素:
[].forEach.call(document.querySelectorAll('*[disabled]'), function(element) {
element.parentNode.removeChild(element)
})
演示: http://jsfiddle.net/93D3h/15/
或使用jQuery: $('[disabled]').remove()
更新:根据意见和新的要求,我做了这里的小拨动演示使用数据属性来代替: http://jsfiddle.net/95Ed5/
试试这个代码
.hidden {
visibility: hidden;
}
设计成显示或隐藏元件,包括它周围的帧和背景。 当您隐藏的元素,虽然它没有在那取件的地方显示的仍然是他。 如果不同的元素在同一个地方的期望的输出在画面上,以绕过该功能应该使用绝对定位,或使用属性显示。
你最好的拍摄(跨浏览器解决方案)将使用jQuery存储隐藏价值。 这是可以做到这常规的JavaScript了。
var array = $(".hidden");
$(".hidden").remove();
然后,当你需要他们,你让他们在array
更新
以下是更新的小提琴: http://jsfiddle.net/93D3h/16/
我添加了两个按钮,以显示你可以与存储的隐藏价值(它们添加回选择,或将其删除)做什么