如何从应用了 Select2 的选择元素中删除选项？答案

【问题标题】：How to remove an option from a select element with Select2 applied?如何从应用了 Select2 的选择元素中删除选项？
【发布时间】：2022-09-30 21:48:01
【问题描述】：

所以，我有这个 HTML 代码：

<input type=\"checkbox\" id=\"orders_lives_in_ccs\" name=\"orders[lives_in_ccs]\" class=\"lives_in_ccs\">
<select id=\"orders_shipping_from\" name=\"orders[shipping_from]\" required=\"required\" class=\"shipping_from toSelect2\">
    <option value=\"\" selected=\"selected\">-- SELECCIONAR --</option>
    <option value=\"MRW\">MRW - COBRO EN DESTINO</option>
    <option value=\"DOMESA\">DOMESA - COBRO EN DESTINO</option>
    <option value=\"ZOOM\">GRUPO ZOOM - COBRO EN DESTINO</option>
</select>

我需要删除该选项 MRW当复选框 .lives_in_ccs已检查，因此我制作了此代码：

$(function () {
    $(\'.toSelect2\').select2();

    var detachedMember;
    $(\'.lives_in_ccs\').click(function () {
        if (this.checked) {
            detachedMember = $(\'.shipping_from option[value=\"MRW\"]\').detach();
        } else {
            $(\'.shipping_from option[value=\"\"]\').after(detachedMember);
        }

        $(\".secure_shipping\").toggle(this.checked);
    });
});

此代码有效，但我遇到问题并且没有找到修复它的方法。让this jsFiddle 做这个测试：

将 SELECT 保留为默认值 --SELECCIONAR-- 并在左侧标记检查，这将起作用并将从主 SELECT 中删除选项 MRW，如果取消标记检查，则该值将再次出现在 SELECT
在 SELECT 上选择 MRW（第一个选项）并在左侧标记检查，这将从主 SELECT 中删除选项 MRW，但会将选项保留为 SELECTED，因为服务器是错误的方没想到。

那么，即使在 SELECT 元素上选择了该选项，我如何删除它？有什么帮助吗？

也许如果在您单击复选框时选择了 MRW，请将选择的值重置为 --SELECCIONAR--。我认为 Select2 中有一种方法可以让您更改所选值。我想是val，但不记得了。

标签： javascript jquery jquery-select2

【解决方案1】：

这是用于测试的更新小提琴：http://jsfiddle.net/fgaqgpd7/2/

这将重置 select2 输入的值：

$('.toSelect2').select2('val','');

您可以在单击事件处理程序时应用它。基本上，如果选择了 MRW，则重置 select2 值。

$(function () {
    $('.toSelect2').select2();
    var detachedMember;
    $('.lives_in_ccs').click(function () {
        if (this.checked) {
            if ($('.toSelect2').select2('val') == 'MRW') {
                $('.toSelect2').select2('val','');
            }
            detachedMember = $('.shipping_from option[value="MRW"]').detach();
        } else {
            $('.shipping_from option[value=""]').after(detachedMember);
        }

        $(".secure_shipping").toggle(this.checked);
    });
});

【讨论】：

【解决方案2】：

尝试这个：

if($(".lives_in_ccs").is(':checked')){ 
    $("#orders_shipping_from option[value='MRW']").remove();
}

希望这可以帮助：）

【讨论】：

Select2 仍将重新渲染它。

【解决方案3】：

在 Select2 4.0.13 版本中对我来说：

$('#my-form').on('change', '.checkbox-item', updateDropdown);

HTML 对象：

<input type="checkbox" name="checkbox_1" id="checkbox_1" value="1" class="form-control checkbox-item" data-text="Label" />

事件功能：

    function updateDropdown(e) {
    if (e.target.checked) {
        if ($('#dropdown').select2('val') == $(this).val()) {
            $('#dropdown').select2('val', '');
        } else {
            var newOption = new Option($(this).attr('data-text'), $(this).val(), false, false);
            $('#dropdown').append(newOption).trigger('change');
        }
    } else {
        $('#dropdown option[value="' + $(this).val() + '"]').detach();
    }
}

【讨论】：