CODEWITHSUNDEEP
javascriptjqueryjquery-select2
ReynierPM
ReynierPM

Reputation: 18690

Show/Hide option in Select2 using toggle or similar

I have a drop-down element which I apply .select2(), before, when it's a common SELECT element I use this code to toggle a element:

$('#orders_nat_lives_in_ccs').click(function() {
    $(".shipping_from option[value='MRW']").toggle(!this.checked);
    $(".shipping_from option:eq(" + ((this.checked) ? 1 : 0) + ")").prop('selected', true);

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

But this not work for Select2 what's the right way to do this using this library?

Here you have a Fiddle example around what I'm talking about, first drop-down has .select2() applied and code doesn't work, second one is the same but without Select2 and the same code works.

Upvotes: 0

Views: 4166

Answers (1)

Sunand
Sunand

Reputation: 723

As select to is taking options even if they are hidden I found removing and appending the option is easier. please find the code bellow

$('#orders_nat_lives_in_ccs').click(function() {
    if(this.checked){
        $(".shipping_from option[value='MRW']").remove()
       $(".shipping_from").select2("val", "DOMESA");
    }else{
        $(".shipping_from").prepend('<option value="MRW">MRW - COBRO EN DESTINO</option>');
       $(".shipping_from").select2("val", "MRW");

    }
//    $(".shipping_from option[value='MRW']").toggle(!this.checked);
//    $(".shipping_from option:eq(" + ((this.checked) ? 1 : 0) + ")").prop('selected', true);
});

Upvotes: 1

Related Questions