如何按班级选择选项？答案

【问题标题】：How do I select an option by class?如何按班级选择选项？
【发布时间】：2011-06-21 23:07:28
【问题描述】：

我尝试使用$('.className').show(); 和$('.className').hide();，但它似乎不适用于IE。是否有另一种方法可以在下拉列表中按类别对选项进行分组？我找到了this question，但答案是寻找值“a”或“c”。

//if 2 is selected remove C
case 2 : $('#theOptions2').find('option:contains(c)').remove();break;
//if 3 is selected remove A
case 3 : $('#theOptions2').find('option:contains(a)').remove();break;

如何查找实际课程？

编辑

<select id="theOptions2">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

【问题讨论】：

我会发表评论，因为我不确定它是否会起作用，但$('#theOptions2 option').hasClass('.className').remove(); 可能会这样做。
您能否提供#theOptions2 下拉列表的示例？ c & a 项有类吗？
Hide options in a select list using jQuery的可能重复

标签： javascript jquery select option

【解决方案1】：

我以前从未见过有人尝试在选项元素上调用隐藏/显示，我想 IE 只是不允许你这样做。选择可能匹配得很好，但 IE 并没有隐藏元素。删除的选择与调用 show hide 的选择相同...

$('.className').remove();

或

$('option.className').remove();

或

$('#theSelect option.className').remove();

【讨论】：

这似乎有效......但我该如何添加？ $('className').add();似乎不起作用。
好吧，现在您正在反向工作...您可以通过以下方式将选项附加到 SELECT：$( '<option />' ).val( VALUE ).text( TEXT ).appendTo( '#theSelect' );

【解决方案2】：

您可以将disabled 属性添加到您不想使用的选项中：

http://jsfiddle.net/sadmicrowave/Fnvqb/

【讨论】：

+1 我也喜欢禁用的想法，尽管 OP 可能不喜欢选项仍然可见。
是的，我看到他正在尝试使用 .remove() ，这表明他实际上想从列表中删除该项目。我只是认为这比删除 DOM 元素更具侵入性（我不喜欢删除 DOM 元素，除非我绝对必须这样做）。

【解决方案3】：

$('select[class~="cactus"]')
$('option[class~="cactus"]')

javascript:(function(){    
    var out = "hi\n";
    out += $('*[class~="cactus"]').html2string()  ;
    alert( out );
})()

为了将来参考，而不是用文字描述 html ... 显示实际的 html

【讨论】：

【解决方案4】：

此演示代码显示了一种实现选项过滤的方法......它需要修改以确定哪些候选项目被删除，因为我只是为了演示而硬编码，但它向您展示了您需要考虑的内容 - 何时您删除这些项目，您需要考虑添加它们的顺序。绕过此问题的最简单方法是保留原始列表的副本，然后在取消过滤时，只需删除剩余的项目，将它们替换为原始列表 - 否则您必须担心保留排序数据。

所以这是我的下拉定义：

<select id="mySelector">
  <option class="group1">Item 1</option>
  <option class="group2">Item 2</option>
  <option class="group1">Item 3</option>
  <option class="group2">Item 4</option>
  <option class="group1">Item 5</option>
</select>

<input type="button" id="removeItems" value="Remove candidate items" />
<input type="button" id="addItems" value="Add them back" />

以及用于过滤/恢复项目的 jquery：

$(function () {

    var originalOptionData;

    $("#removeItems").bind('click', function () {
        /* store original copy for rollback */
        originalOptionData = $("#mySelector option");
        $("#mySelector option.group2").remove();
    });

    $("#addItems").bind('click', function () {
        var selector = $("#mySelector");
        selector.children().remove();
        selector.append(originalOptionData);
    });
});

我想这可以相对简单地变成一个选择过滤器 jquery 插件，但我没有走那么远......

【讨论】：