如何隐藏JavaScript的select？ （跨浏览器）
这应该工作：
$('option').hide(); // hide options 它在Firefox中工作，但不是Chrome（可能不在IE中，未经testing）。
一个更有趣的例子：
<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元素。
在过去，当我需要这样做时，我已经设置了他们的disabled属性，像这样…
$('option').prop('disabled', true);
然后，我使用隐藏在浏览器中使用这段CSS支持的地方…
select option[disabled] { display: none; }
如前所述，您不能display:none个<option> ，因为它们不是正确的DOM元素。
你可以设置.prop('disabled', true) ，但是这只会使元素变灰，使它们变得不可select – 它们仍占用空间。
我使用的一个解决scheme是在页面加载时将.detach() <select>到一个全局variables，然后只添加你想要的<option> 。 像这样（ http://jsfiddle.net/mblase75/Afe2E/ ）：
var $sel = $('#sel option').detach(); // global variable $('a').on('click', function (e) { e.preventDefault(); var c = 'name-of-class-to-show'; $('#sel').empty().append( $sel.filter('.'+c) ); });
起初我以为你必须在添加它们之前.clone() <option> ，但显然不是。 click代码运行后原来的全局$sel没有改变。
如果你厌恶全局variables，你可以将包含选项的jQuery对象作为一个.data()variables存储在<select>元素本身（ http://jsfiddle.net/mblase75/nh5eW/ ）上：
$('#sel').data('options', $('#sel option').detach()); // data variable $('a').on('click', function (e) { e.preventDefault(); var $sel = $('#sel').data('options'), // jQuery object c = 'name-of-class-to-show'; $('#sel').empty().append( $sel.filter('.'+c) ); });
有一个自己的裂缝，这就是我想出了：
(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删除，并可以通过jQueryselect器重新添加。
可能需要一些工作和testing之前，它适用于所有情况下足够好，但它足够我所需要的。
隐藏<option>元素不在规范中。 但是，你可以disable它们，这应该跨浏览器工作。
$('option.hide').prop('disabled', true);
我知道这有点晚，但比从来没有更晚！ 这是一个非常简单的方法来实现这一点。 只需要显示和隐藏function。 hide函数只是将每个选项元素附加到预定的（隐藏的）span标签（这对所有的浏览器都适用），然后showfunction将这个选项元素移回到你的select标签中。 ;）
function showOption(value){ $('#optionHolder option[value="'+value+'"]').appendTo('#selectID'); } function hideOption(value){ $('select option[value="'+value+'"]').appendTo('#optionHolder'); }
三年了，但是我的谷歌search把我带到了这里，希望我的回答对别人有用。
我刚刚创build了第二个选项（我用CSS隐藏），并使用JavaScript来移动它们之间的向前和向后。
<select multiple id="sel1"> <option class="set1">Blah</option> </select> <select multiple id="sel2" style="display:none"> <option class="set2">Bleh</option> </select>
像这样的东西，然后像这样的东西将项目移动到列表（即，使其可见）。 显然根据需要调整代码以达到您的目的。
$('#sel2 .set2').appendTo($('#sel1'))
既然你提到你想重新添加选项，我build议你加载一个数组或对象的页面加载select框的内容 – 这样你总是有一个“主列表”的原始select如果你需要恢复它。
我做了一个简单的例子，删除select中的第一个元素，然后使用恢复button将select框恢复到原始状态：
这里有一个选项：
- 适用于所有浏览器
- 过滤时保留当前select
- 在删除/恢复时保留项目的顺序
- 没有肮脏的黑客/无效的HTML
`
$('select').each(function(){ var $select = $(this); $select.data('options', $select.find('option')); }); function filter($select, search) { var $prev = null; var $options = $select.data('options'); search = search.trim().toLowerCase(); $options.each(function(){ var $option = $(this); var optionText = $option.text(); if(search == "" || optionText.indexOf(search) >= 0) { if ($option.parent().length) { $prev = $option; return; } if (!$prev) $select.prepend($option); else $prev.after($option); $prev = $option; } else { $option.remove(); } }); }
`
JSFiddle： https ：//jsfiddle.net/derrh5tr/
您可以尝试在一个范围内包装选项元素，以便它们不会被看到，但仍然被加载到DOM中。 像下面一样
jQ('#ddlDropdown option').wrap('<span>');
并打开包含“selected”属性的选项，如下所示，以显示已经select的选项。
var selectedOption = jQ('#ddlDropdown').find("[selected]"); jQ(selectedOption).unwrap();
这适用于所有的浏览器。
如果你保持对象并简短地过滤它是可能的。
<select id="driver_id"> <option val="1" class="team_opion option_21">demo</option> <option val="2" class="team_opion option_21">xyz</option> <option val="3" class="team_opion option_31">ab</option> </select>
–
team_id= 31; var element = $("#driver_id"); originalElement = element.clone(); // keep original element, make it global element.find('option').remove(); originalElement.find(".option_"+team_id).each(function() { // change find with your needs element.append($(this)["0"].outerHTML); // append found options });
尝试这个：
$(".hide").css("display","none");
但我认为隐藏它是没有意义的。 如果你想删除它，只是：
$(".hide").remove();
只需修改我的需要dave1010的代码
(function($){ $.fn.extend({hideOptions: function() { var s = this; return s.each(function(i,e) { var d = $.data(e, 'disabledOptions') || []; $(e).find("option[disabled=\"disabled\"]").each(function() { d.push($(this).detach()); }); $.data(e, 'disabledOptions', d); }); }, showOptions: function() { var s = this; return s.each(function(i,e) { var d = $.data(e, 'disabledOptions') || []; for (var i in d) { $(e).append(d[i]); } }); }}); })(jQuery);
我以为我很聪明;-)
在CSS中：
option:disabled {display:none;}
在Firefox和Chrome中，只创build了启用选项的select。 尼斯。
在IE中，启用的选项被显示，禁用的地方只有空行。 坏。
在Edge中，顶部显示了启用的选项，其后是禁用选项的空白行。 可接受的。
