如何使用JavaScript隐藏选择选项？(跨浏览器)
如何使用JavaScript隐藏选择选项？(跨浏览器)
提问于 2010-12-09 21:58:16
这应该是可行的：
$('option').hide(); // hide options它可以在Firefox中运行，但不能在Chrome中运行(而且很可能不能在IE中运行，没有经过测试)。
一个更有趣的例子：
<select>
<option class="hide">Hide me</option>
<option>visible option</option>
</select>
<script type="text/javascript">
// try to hide the first option
$('option.hide').hide();
// to select the first visible option
$('option:visible').first().attr('selected', 'selected');
</script>或者查看http://jsfiddle.net/TGxUf/上的示例
从DOM中分离option元素是唯一的选择吗？我需要稍后再展示一次，所以这不是很有效。
回答 11
Stack Overflow用户
回答已采纳
发布于 2010-12-09 22:04:37
不幸的是，您不能在所有浏览器中隐藏option元素。
在过去，当我需要这样做时，我设置了他们的disabled属性，如下所示...
$('option').prop('disabled', true);然后，我使用这段CSS在浏览器中支持它的地方使用了隐藏...
select option[disabled] {
display: none;
}Stack Overflow用户
发布于 2010-12-13 03:29:34
我自己也试过了，我想出了这样的想法：
(function($){
$.fn.extend({detachOptions: function(o) {
var s = this;
return s.each(function(){
var d = s.data('selectOptions') || [];
s.find(o).each(function() {
d.push($(this).detach());
});
s.data('selectOptions', d);
});
}, attachOptions: function(o) {
var s = this;
return s.each(function(){
var d = s.data('selectOptions') || [];
for (var i in d) {
if (d[i].is(o)) {
s.append(d[i]);
console.log(d[i]);
// TODO: remove option from data array
}
}
});
}});
})(jQuery);
// example
$('select').detachOptions('.removeme');
$('.b').attachOptions('[value=1]');');你可以在http://www.jsfiddle.net/g5YKh/上看到这个例子
option元素将从select中完全删除，并且可以通过jQuery选择器重新添加。
可能需要一些工作和测试，才能在所有情况下工作得足够好，但对于我需要的已经足够好了。
Stack Overflow用户
发布于 2013-07-30 03:45:04
我知道这有点晚了，但迟到总比不到好！这里有一个非常简单的方法来实现这一点。简单地有一个显示和隐藏功能。hide函数只会将每个option元素附加到一个预定的(隐藏的) span标记(这应该适用于所有浏览器)，然后show函数会将该option元素移回您的select标记中。;)
function showOption(value){
$('#optionHolder option[value="'+value+'"]').appendTo('#selectID');
}
function hideOption(value){
$('select option[value="'+value+'"]').appendTo('#optionHolder');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4398966
复制相关文章
相似问题