如何在应用Select2后从下拉选择框中删除一个选项？

Question

因此，我有这段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>

当选框.lives_in_ccs被选中时，我需要删除选项MRW，因此我编写了以下代码：

$(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);
    });
});

这段代码可以运行，但我遇到了问题，并且找不到解决方法。请使用这个 jsFiddle 进行以下测试：

• 保留SELECT的默认值--SELECCIONAR--并在左侧打勾，这样将起作用并从主SELECT中删除选项MRW，如果取消打勾，则该值将再次出现在SELECT中
• 在SELECT中选择MRW（第一个选项）并在左侧打勾，这将从主SELECT中删除选项MRW，但会将选项保留为被选中状态，这是错误的，因为服务器端不需要它。

那么，如何即使在SELECT元素中已选择该选项也将其删除？有什么帮助吗？

- ReynierPM

---

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

Answer 1

这是更新后的用于测试的fiddle：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);
    });
});

- Gohn67

Answer 2

试一试：

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

希望这能帮到您 :)

- Syed Muhammad Zeeshan

---

Select2 仍将重新渲染它。 - alias51

Answer 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();
    }
}

- Michael Gordon