Select2 select order returns value of different option

Question

I am using a fairly simple select2 pillbox dropdown to get values of selected options.

Select code:

<select required="" id="pick_festival" class="festivals-dropdown select2-hidden-accessible" name="festivals[]" multiple="" data-select2-id="pick_festival" tabindex="-1" aria-hidden="true">
    <option value="106" data-select2-id="4">Lowlands</option>
    <option value="92" data-select2-id="5">Paaspop</option>
    <option value="97" data-select2-id="6">Roadburn</option>
    <option value="94" data-select2-id="7">Wakana Lake</option>
    <option value="108" data-select2-id="8">Zwahana</option>                            
</select>

jQuery code:

$('#pick_festival').on("select2:select", function(e){

    var festival = $(this).find(':selected:last').val();
    console.log(festival);

});

Now, this works just fine when I select from top to bottom. Console.log always displays the correct value. However, when I select the last option, and select a different option BEFORE this option, it returns the value of the previously selected.

hoangkianh hoangkianh · Accepted Answer · 2018-05-09T09:42:44

That is an issue of Select2. You can see the discussion here: https://github.com/select2/select2/issues/3106

You can follow this comment or a simpler way

Select2 select order returns value of different option

1 Answers