这应该有效：
$('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分离选项元素的唯一选择吗？我需要稍后再次展示，所以这不会很有效。
答案 0 :(得分：57)
很遗憾，您无法在所有浏览器中隐藏option元素。
过去当我需要这样做时，我已经设置了disabled属性，就像这样......
$('option').prop('disabled', true);
然后我使用了这个CSS的浏览器支持它的隐藏...
select option[disabled] {
display: none;
}
答案 1 :(得分：23)
如前所述，你不能display:none个人<option>，因为它们不是正确的DOM元素。
您可以设置.prop('disabled', true)，但这只会使元素变灰并使其无法选择 - 它们仍会占用空间。
我使用的一个解决方案是.detach()将<select>加载到页面加载的全局变量中，然后仅按需添加<option> s。这样的事情（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> s才能追加它们，但显然不是。运行$sel代码后，原始全局click不会改变。
如果您厌恶全局变量，则可以将包含选项的jQuery对象存储为.data()元素本身（http://jsfiddle.net/mblase75/nh5eW/）上的<select>变量：
$('#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) );
});
答案 2 :(得分：11)
我自己也有一个问题，这就是我提出来的：
(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选择器重新添加。
在它适用于所有情况之前可能需要一些工作和测试，但它足以满足我的需要。
答案 3 :(得分：8)
隐藏<option>元素不在规范中。但是你可以disable，它们应该跨浏览器工作。
$('option.hide').prop('disabled', true);
答案 4 :(得分：7)
我知道这有点晚了但迟到总比没有好！这是实现这一目标的一种非常简单的方法。只需一个显示和隐藏功能。 hide函数只是将每个选项元素附加到预定的（隐藏的）span标记（应该适用于所有浏览器），然后show函数将把该选项元素移回到select标记中。 ;）
function showOption(value){
$('#optionHolder option[value="'+value+'"]').appendTo('#selectID');
}
function hideOption(value){
$('select option[value="'+value+'"]').appendTo('#optionHolder');
}
答案 5 :(得分：4)
您可以尝试将选项元素包装在范围中，以便它们不会显示但仍然可以加载到DOM中。如下所示
jQ('#ddlDropdown option').wrap('<span>');
打开包含＆＃39;已选择＆＃39;的选项。属性如下，以显示已选择的选项。
var selectedOption = jQ('#ddlDropdown').find("[selected]");
jQ(selectedOption).unwrap();
适用于所有浏览器。
答案 6 :(得分：3)
迟了三年，但我的谷歌搜索把我带到了这里，希望我的回答对其他人有用。
我刚创建了第二个选项（我用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'))
答案 7 :(得分：3)
这是一个选项：
`
$('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/
答案 8 :(得分：2)
如果您保留对象并以短暂方式过滤它，则可能。
<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
});
答案 9 :(得分：1)
由于您之前提到要重新添加选项，我建议您在页面加载时使用选择框的内容加载数组或对象 - 这样您总是有一个“主列表”原始选择，如果您需要恢复它。
我做了一个简单的例子，删除了select中的第一个元素，然后一个恢复按钮将选择框放回原来的状态：
答案 10 :(得分：1)
这是@ NeverEndingLearner的答案增强版：
$("#hide").click(function(){
$("select>option.hide").wrap('<span>'); //no multiple wrappings
});
$("#show").click(function(){
$("select span option").unwrap(); //unwrap only wrapped
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<select>
<option class="hide">Hide me</option>
<option>visible option</option>
</select>
<button id="hide">hide</button>
<button id="show">show</button>
答案 11 :(得分：1)
在纯JS上：
select = document.getElementById("select_id")
to_hide = select[select.selectedIndex];
to_hide.setAttribute('hidden', 'hidden')
取消隐藏
to_hide.removeAttribute('hidden')
答案 12 :(得分：0)
试试这个：
$(".hide").css("display","none");
但我认为隐藏它是没有意义的。如果你想删除它，只需：
$(".hide").remove();
答案 13 :(得分：0)
根据我的需要修改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);
答案 14 :(得分：0)
我以为我很聪明; - ）
在CSS中：
option:disabled {display:none;}
在Firefox和Chrome中，创建了仅包含已启用选项的选项。好的。
在IE中，显示启用的选项，禁用的位置只是空白行。坏。
在Edge中，启用的选项显示在顶部，后面是禁用选项的空行。可以接受的。