我在选项元素中有一些style='display:none'，它在Chrome上运行良好，我意识到它无法在IE上运行。
<select>
<option style="display:none;">One</option>
<option>Two</option>
<option style="display:none;">Three</option>
<option>Four</option>
</select>
使用jQuery，如何遍历选项以查找display:none并删除元素<option>？
答案 0 :(得分：6)
这似乎对我有用：
$('select option').each(function(){
if(this.style.display == 'none')
{
$(this).remove();
}
});
答案 1 :(得分：1)
John Boker的解决方案是这个问题的正确解决方案。但它确实有缺点，一旦你删除它们，你将无法检索这些选项。
一种解决方案是在删除任何<select>标记之前保存<option>的完整HTML。
var $s = $('select');
$s.data("originalHTML", $s.html());
现在您可以通过颠倒这个来轻松恢复：$s.html($s.data("originalHTML"));
有关此解决方案的完整详情：https://stackoverflow.com/a/24439289/1766230
答案 2 :(得分：0)
我有同样的问题，但有点复杂，是的，我们需要删除隐藏在IE / Chrome / Safari中的选项。
但在某些情况下，我们只想基于条件/过滤器隐藏选项组，而remove()只是完全删除。我有以下解决方案来解决这个问题。它删除了选项但在同一select元素的数据属性中保留了删除选项，并且在需要时我们只是按给定的排序顺序（值或标签）重新填充。
让我们说：
<select id='sorty' multiple=true>
<option value="1">Group A</option>
<option value="2">Group B</option>
<option value="3">Group c</option>
<option value="4">Group D</option>
<option value="5">Group D</option>
</select>
<button onclick="HideG('A')">Hide Group A</button>
<button onclick='HideG("B")'>Hide Group B</button>
<button onclick='HideG("C")'>Hide Group C</button>
<button onclick='HideG("D")'>Hide Group D</button>
<button onclick='ShowAll()'>Show ALL</button>
（需要Jquery）：
function selectOptionFilter(src,filter,sortBy)
{
if(!$(src).data('hiddenOpts'))
$(src).data('hiddenOpts',[]);
//re-insert while keeping sort order by value or label
$($(src).data('hiddenOpts')).each(function(){
var hiddenOpt=this;
var positioned=false;
$(src).find('option').each(function(i){
if((sortBy=='value' && $(this).attr('value')*1 > $(hiddenOpt).attr('value'))
||
(sortBy=='label' && $(this).text() > $(hiddenOpt).text())
){
$(this).before(hiddenOpt);
positioned=true;
//break
return false;
}
});
//else append
if(!positioned){
$(src).append(hiddenOpt);
}
});
//clean the hidden list
$(src).data('hiddenOpts',[]);
//apply the filter and remove options
if( typeof filter=='function'){
$(src).find('option').filter(filter).each(function(){
$(src).data('hiddenOpts').push($(this).remove());
});
}
}
function HideG(xname){
selectOptionFilter($('#sorty'),function(){
return ( $(this).text().indexOf(xname) > -1);
},'value');
}
function ShowAll(){
selectOptionFilter($('#sorty'),function(){ return false;},'value');
}
您可以传递更复杂的过滤器功能以删除所需的选项。
答案 3 :(得分：0)
今天我遇到了同样的问题。 如果不删除不需要的选项，您将无法获得预期的结果。但问题是如果你想稍后再显示这些选项，你需要记住这些选项。
我的解决方案非常简单，适用于所有主流浏览器：
function filterList(oList, rxSearch)
{
// Create backup of the old option list (only once)
if(typeof(oList.tagOptions) === "undefined")
{
// Save current options
oList.tagOptions = [ ]; // Generate a dynamic property for this DOM object
for(var i = 0; i < oList.options.length; ++i)
oList.tagOptions.push(oList.options[i]);
}
// Clear the current option list
while(oList.options.length)
oList.options.remove(0);
// Add only those options which match the regular expression
for(var i = 0; i < oList.tagOptions.length; ++i)
{
if(rxSearch.test(oList.tagOptions[i].text))
oList.options.add(oList.tagOptions[i]);
}
}
技巧是在第一次运行时将选项元素复制到动态创建的tagOptions属性中。由于仍会有对这些已删除的选项DOM元素的引用（在tagOptions中），因此它们不会被释放。此外，您不需要全局变量。 稍后将清除可见选项（oList.options），并仅添加与搜索词匹配的选项。
使用以下HTML代码：
<select id="myList" size="10">
<option>apple</option>
<option>advocado</option>
<option>banana</option>
<option>coconut</option>
</select>
你会这样称呼：
filterList(document.getElementById("myList"), /^a/i); // Display only those elements, which start with an a
alert("Display all with a");
filterList(document.getElementById("myList"), /^b/i); // Display only those elements, which start with an b
alert("Display all with b");
filterList(document.getElementById("myList"), /^/i); // Display only those elements, which start with an c
alert("Display all");
我已经使用Firefox，Internet Explorer 11，Chrome和Opera对此进行了测试。它适用于我的目的。
function filterList(oList, rxSearch)
{
// Create backup of the old option list (only once)
if(typeof(oList.tagOptions) === "undefined")
{
// Save current options
oList.tagOptions = [ ]; // Generate a dynamic property for this DOM object
for(var i = 0; i < oList.options.length; ++i)
oList.tagOptions.push(oList.options[i]);
}
// Clear the current option list
while(oList.options.length)
oList.options.remove(0);
// Add only those options which match the regular expression
for(var i = 0; i < oList.tagOptions.length; ++i)
{
if(rxSearch.test(oList.tagOptions[i].text))
oList.options.add(oList.tagOptions[i]);
}
}
filterList(document.getElementById("myList"), /^a/i); // Display only those elements, which start with an a
alert("Display all with a");
filterList(document.getElementById("myList"), /^b/i); // Display only those elements, which start with an b
alert("Display all with b");
filterList(document.getElementById("myList"), /^/i); // Display only those elements, which start with an c
alert("Display all");<select id="myList" size="10">
<option>apple</option>
<option>advocado</option>
<option>banana</option>
<option>coconut</option>
</select>
答案 4 :(得分：0)
Display: none will not work foe IE11
I had same issue for search in select option
What I did is disabled the un matched options and the hide them.
After this I have sorted the options to show only enabled options on top.
The code I have written is pasted below - please try to understand the logic I hope it will work
禁用选项使用
$("#addselect option")attr('disabled', 'disabled').hide
and to again enable it use
$("#addselect option").removeAttr('disabled').show();
sort by disabled options.
$("#addselect option").each(function (i, val) {
if ($(this)[i].disabled) {
moveDown("selectId");
}
else {
moveUp("selectId");
}
}
function moveUp(selectId) {
var selectList = document.getElementById(selectId);
var selectOptions = selectList.getElementsByTagName('option');
for (var i = 1; i < selectOptions.length; i++) {
var opt = selectOptions[i];
if (!opt.disabled) {
selectList.removeChild(opt);
selectList.insertBefore(opt, selectOptions[i - 1]);
}
}
}
function moveDown(selectId) {
var selectList = document.getElementById(selectId);
var selectOptions = selectList.getElementsByTagName('option');
for (var i = selectOptions.length - 2; i >= 0; i--) {
var opt = selectOptions[i];
if (opt.disabled) {
var nextOpt = selectOptions[i + 1];
opt = selectList.removeChild(opt);
nextOpt = selectList.replaceChild(opt, nextOpt);
selectList.insertBefore(nextOpt, opt);
}
}
}