如何使用 JavaScript 隐藏选择选项? (跨浏览器)
Posted
技术标签:
【中文标题】如何使用 JavaScript 隐藏选择选项? (跨浏览器)【英文标题】:How can I hide select options with JavaScript? (Cross browser) 【发布时间】:2011-05-22 21:18:54 【问题描述】:这应该可行:
$('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:visible:first') 代替 $('option:visible').first() 对于现在遇到这个问题的任何人,请注意发布的代码确实在 Chrome 和 Firefox 中工作(尚未测试 IE)。:visible
选择器不适用于<option>
s。引用该文档,“所有option
元素都被认为是隐藏的,无论它们的selected
状态如何。”
【参考方案1】:
很遗憾,您无法在所有浏览器中隐藏option
元素。
过去当我需要这样做时,我已经设置了他们的disabled
属性,就像这样......
$('option').prop('disabled', true);
然后我在浏览器支持的地方使用了隐藏,使用这段 CSS...
select option[disabled]
display: none;
【讨论】:
这是一个好的开始,但我确实需要在所有浏览器中删除这些选项。 @dave1010 您唯一的选择是构建option
s 的对象,并根据需要删除和附加。
如果这个答案不清楚。在 Firefox、Chrome 和 Edge 但在 IE 或 Safari(2018/2019)中禁用和显示无效
在回答另一个问题***.com/questions/57511712/…时做了一个简单的JS演示sn-p
hidden
? ***.com/a/24516786, caniuse.com/#feat=hidden【参考方案2】:
如前所述,您不能 display:none
单个 <option>
s,因为它们不是正确的 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 才能附加它们,但显然不是。运行click
代码后,原来的全局$sel
不变。
如果您不喜欢全局变量,您可以将包含选项的 jQuery 对象作为 .data()
变量存储在 <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) );
);
【讨论】:
感谢您的回答,对我帮助很大。当您拥有完整的跨浏览器解决方案时总是很好。恕我直言,这应该是公认的答案 这对我有帮助,关键是使用 $.detach()(或 $.remove())来实现最大的跨浏览器兼容性,而不是 $.hide()【参考方案3】:我自己尝试了一下,这就是我想出的:
(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
s 中完全删除,并且可以通过 jQuery 选择器再次重新添加。
在它适用于所有情况之前可能需要一些工作和测试,但它足以满足我的需要。
【讨论】:
我真的不想接受自己的答案,但除非有人想出更好的办法,否则我可能不得不:-) 在 IE8 上运行时,我遇到了 dave1010 的回答问题。 attachOptions 函数中的 if (d[i].is(o)) 调用导致“对象不支持此属性或方法”消息。 这是完成“TODO”部分的方法。您必须将 for 循环更改为“for (var i = 0; i 【参考方案4】:我知道这有点晚了,但迟到总比没有好!这是实现这一目标的一种非常简单的方法。只需具有显示和隐藏功能。 hide 函数只会将每个选项元素附加到预定的(隐藏的)跨度标签(应该适用于所有浏览器),然后 show 函数只会将该选项元素移回您的选择标签。 ;)
function showOption(value)
$('#optionHolder option[value="'+value+'"]').appendTo('#selectID');
function hideOption(value)
$('select option[value="'+value+'"]').appendTo('#optionHolder');
【讨论】:
有趣的想法。我猜临时容器甚至不必附加到 DOM(例如,只需使用document.createElement()
创建)。
不知道为什么这个安德烈被否决了。它确实解决了这个问题,而且做得很好。【参考方案5】:
隐藏<option>
元素不在规范中。但是你可以disable
他们,这应该可以跨浏览器工作。
$('option.hide').prop('disabled', true);
http://www.w3.org/TR/html401/interact/forms.html#h-17.6
【讨论】:
【参考方案6】:您可以尝试将选项元素包装在 span 中,这样它们就不会可见,但仍会加载到 DOM 中。如下所示
jQ('#ddlDropdown option').wrap('<span>');
并解开包含'selected'属性的选项,如下所示显示已选择的选项。
var selectedOption = jQ('#ddlDropdown').find("[selected]");
jQ(selectedOption).unwrap();
这适用于所有浏览器。
【讨论】:
【参考方案7】:这是一个选项:
适用于所有浏览器 过滤时保留当前选择 删除/恢复时保留项目的顺序 没有肮脏的黑客行为/无效的 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/
【讨论】:
我在这一行添加了一个 .toLowerCase(): var optionText = $option.text();【参考方案8】:晚了三年,但我的谷歌搜索把我带到了这里,所以希望我的回答对其他人有用。
我刚刚创建了第二个选项(我用 CSS 隐藏了它)并使用 Javascript 在它们之间来回移动 s。
<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'))
【讨论】:
【参考方案9】:在纯 JS 上:
let select = document.getElementById("select_id")
let to_hide = select[select.selectedIndex];
to_hide.setAttribute('hidden', 'hidden');
仅取消隐藏
to_hide.removeAttr('hidden');
或
to_hide.hidden = true; // to hide
to_hide.hidden = false; // to unhide
【讨论】:
removeAttribute 应该是 removeAttr【参考方案10】:如果你保留对象并在短时间内过滤它是可能的。
<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
);
https://jsfiddle.net/2djv7zgv/4/
【讨论】:
【参考方案11】:这是@NeverEndingLearner 答案的增强版:
完整的浏览器支持不使用不受支持的 CSS 保留职位 没有多重包装$("#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>
【讨论】:
【参考方案12】:由于您提到稍后要重新添加选项,我建议您在页面加载时使用选择框的内容加载一个数组或对象 - 这样您始终拥有一个“主列表”如果需要恢复原始选择。
我做了一个简单的例子,它删除了选择中的第一个元素,然后一个恢复按钮将选择框恢复到原来的状态:
http://jsfiddle.net/CZcvM/
【讨论】:
这是个好主意。不幸的是,您提供的代码示例无法在 Firefox 中运行。最好有一个灵活的 jQuery 插件,它可以通过任意选择器删除和重新附加option
元素。【参考方案13】:
试试这个:
$(".hide").css("display","none");
但我认为隐藏它没有意义。如果你想删除它,只需:
$(".hide").remove();
【讨论】:
我认为option
没有display
属性。此外,他说他需要稍后再显示option
s,所以remove()
ing 他们并且不保留返回它们的方式对OP没有用。
@alex:谢谢你提醒我。我只是打字太快了。我想输入 css 代替....谢谢!!
我同意,如果列表中有您不总是想要的项目,请将其作为选项列表的一部分,生成选择标签,然后在正确的情况下,删除该选项你想隐藏。【参考方案14】:
只需根据我的需要修改 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);
http://jsfiddle.net/AbzL3/1/
【讨论】:
【参考方案15】:我以为我很聪明;-)
在 CSS 中:
option:disabled display:none;
在 Firefox 和 Chrome 中,创建了一个仅包含已启用选项的选择。不错。
在 IE 中,已启用的选项会在其原始位置显示,而禁用的选项仅显示空白行。不好。
在 Edge 中,启用的选项显示在顶部,后面是禁用选项的空白行。可以接受。
【讨论】:
【参考方案16】:document.getElementById('hide').style.visibility='hidden';
我在这里使用了 id 作为选项
【讨论】:
以上是关于如何使用 JavaScript 隐藏选择选项? (跨浏览器)的主要内容,如果未能解决你的问题,请参考以下文章
当我们使用 JavaScript 隐藏/显示时清除下拉列表和/或文本框内容当它们被交替选择时