How to remove an option from a select element with Select2 applied?

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?

Everywhere

Maybe if MRW is selected when you click the checkbox, reset the value of the select to --SELECCIONAR--. I think there is a method in Select2 that allows you to change the selected value. I think it is val, but can't remember. – Toadfish

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

Toadfish

Answer 2

try this :

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

Hope this helps :)

Nikola

Select2 will still rerender it. – Ronna

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

Aftershock