jQuery 从 select 中删除选项

Question

我有一个包含 5 个选择的页面，所有选择都具有 class 名称“ct”。 在运行 onclick 事件时，我需要从每个 select 中删除值为“X”的选项。 我的代码是：

$(".ct").each(function() {
    $(this).find('X').remove();
   });

我哪里错了？

Answer 1

试试这个：

$(".ct option[value='X']").each(function() {
    $(this).remove();
});

或者更简洁地说，这也同样有效：

$(".ct option[value='X']").remove();

Answer 2

$('.ct option').each(function() {
    if ( $(this).val() == 'X' ) {
        $(this).remove();
    }
});

要不就

$('.ct option[value="X"]').remove();

要点是find需要一个选择器字符串，通过将它输入x您正在寻找名为x元素。

Answer 3

find()需要一个选择器，而不是一个值。 这意味着您需要以与使用常规 jQuery 函数（ $('selector') ）相同的方式使用它。

因此，您需要执行以下操作：

$(this).find('[value="X"]').remove();

请参阅 jQuery查找文档。

Answer 4

它适用于选项标签或文本字段：

$("#idname option[value='option1']").remove();

Answer 5

如果您的下拉列表在表中并且您没有它的 id，那么您可以使用以下 jquery：

var select_object = purchasing_table.rows[row_index].cells[cell_index].childNodes[1];
$(select_object).find('option[value='+site_name+']').remove();

Answer 6

对于 jquery < 1.8，您可以使用：

$('#selectedId option').slice(index1,index2).remove()

删除特定范围的选择选项。

Answer 7

当我只是删除该选项时，该选项仍保留在视图的 ddl 中，但在 html 中消失了（如果您检查页面）

$("#ddlSelectList option[value='2']").remove(); //removes the option with value = 2
$('#ddlSelectList').val('').trigger('chosen:updated'); //refreshes the drop down list

Answer 8

使用查找迭代列表并删除多个项目。 响应包含一个整数数组。 $('#OneSelectList') 是一个选择列表。

$.ajax({
    url: "Controller/Action",
    type: "GET",
    success: function (response) {
        // Take out excluded years.
        $.each(response, function (j, responseYear) {
            $('#OneSelectList').find('[value="' + responseYear + '"]').remove();
        });
    },
    error: function (response) {
        console.log("Error");
    }
});

Answer 9

我试过这段代码：

$("#select-list").empty()

Answer 10

如果没有 id 或 class 可用于选项值，则可以从下拉列表中删除所有值，如下所示

$(this).find('select').find('option[value]').remove();

Answer 11

试试这个删除选定的

$('#btn-remove').click(function () {
    $('.ct option:selected').each(function () {
        $(this).remove();
    });
});

Answer 12

删除一个option很快成为我最喜欢做的事情就是根本不删除它。 此方法对于那些想要删除该option但可能想稍后重新添加并确保它以正确的顺序添加回来的人很有用。

首先，我实际上disable该选项。

$("#mySelect").change(
    function() {

        $("#mySelect").children('option[value="' + $(this).val() + '"]').prop("disabled", true);

        $("#re-addOption").click(
            function() {
                $("#mySelect").children('option[value="' + howeverYouStoredTheValueHere + '"]').prop("disabled", false);
            }
        );
    }
);

然后为了清理，在我的 CSS 中，我将disabled option设置为隐藏，因为在某些浏览器中隐藏option不起作用，但是使用上述方法，使用这些浏览器的客户端将无法再次选择该选项。

select option[disabled] {
    display: none;
}

就我个人而言，在re-addOption元素上，我有一个自定义属性data-target="value" ，我使用$(this).attr('data-target')代替了howeverYouStoredTheValueHere 。

Answer 13

删除所有选项

$(".select").empty();

删除所有选项并添加空白选项

$(".select").empty().append(new Option('--Select--',''));