jQuery 从选择中删除选项

Question

我有一个包含 5 个选择的页面，所有选择都有一个类名“ct”。我需要在运行 onclick 事件时从每个选择中删除值为“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 find 文档。

Answer 4

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

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

Answer 5

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

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

Answer 6

删除所有选项

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

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

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

Answer 7

使用查找迭代列表并删除多个项目。
响应包含一个整数数组。 $('#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 8

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

首先，我实际上禁用该选项。

$("#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"，并代替 howeverYouStoredTheValueHere，我使用 $(this).attr('data-target')。

Answer 9

如果你的下拉菜单在一个表中并且你没有它的 id 那么你可以使用以下 jquery：

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

Answer 10

对于jquery < 1.8 您可以使用 :

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

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

Answer 11

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

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

Answer 12

尝试此操作以删除所选的

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

Answer 13

我尝试了以下代码：

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