Select2 assigning value using JQuery is not working

Select2 4.0.1, assigning value using JQuery is not working. Previously I used

$('select').select2().select2('val', '3');

was working fine but now it’s not working.

[simplenotezy]

No that is not the issue. I have exactly the same issue. I guess it happend after recent changes to select2 codebase.

The select2 is created in dom with all options. I have verified that the values we are trying to select is there in <option>. It does not work.

$('#select2').select2().select2('val', ['2'])
$('#select2').select2('val', ['2'])
$('#select2').select2().select2('val', 2)
$('#select2').select2().select2('val', "2")

From DOM inspector:

<select name="select2" class="form-control select2-hidden-accessible" id="teams" multiple="" style="width:100%" tabindex="-1" aria-hidden="true">
    <option value="1">Athletics Class (Men)</option>
    <option value="2">Acroyoga Class (Adults)</option>
    <option value="3">Acroyoga Class (Women)</option>
</select>

Code have not changed, and auto appending values does not work anywhere anymore.

Running version 4.0.1

Update:

$('#select2').val([1,2]).trigger('change');

Works

[soniraj]

A very simple way to tackle this problem is :

//Step1: Here assuming id of your selectbox is my_id, so this will add selected attribute to 1st option $(‘#my_id option’).eq(0).prop(‘selected’,true);

//Step2: Now reinitialize your select box

//This will work, if you haven’t initialized selectbox $(‘#my_id’).select2();

or

//This will work, if you have initialized selectbox earlier, so destroy it first and initialise it $(‘#my_id’).select2(‘destroy’).select2();