如何从应用了 Select2 的 SELECT 中删除选项？

Question

So, I have this HTML code:

<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>

I need to remove the option MRW when checkbox .lives_in_ccs is checked so I made this code:

$(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 code works but I'm having a problem and didn't found the way to fixit. Having this jsFiddle do this tests:

• Leave the SELECT with the default value which is --SELECCIONAR-- and mark the check in the left side, that will works and will remove the option MRW from the main SELECT, if you unmark the check the value will appear again on the SELECT
• Choose MRW (the first choice) on the SELECT and mark the check in the left side, that will remove the option MRW from the main SELECT, but will leave the option as SELECTED which is wrong since the server side isn't expecting it.

So, how do I remove the option even if it's selected on the SELECT element? Any help?

Answer 1

Here is the updated fiddle for testing: http://jsfiddle.net/fgaqgpd7/2/

This will reset the value of the select2 input:

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

You can apply it you click event handler. Basically if MRW is selected, then reset the select2 value.

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

Answer 2

try this :

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

Hope this helps :)

Answer 3

For me in version Select2 4.0.13:

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

HTML object:

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

Event function:

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