Ajax selecting multiple values in select2

Question

i am working with select 2, and i have data coming from ajax in json format.

View:

<select class="form-control qual_id" multiple>
    <option value="">-Select Degree-</option>
    <option value="1">SSC</option>
    <option value="2">HSC</option>
    <option value="3">BBA</option>
    <option value="4">MBA</option>
</select>

Ajax:

var defaultValue = 1,2 // (it can be one id or two ids)

$(`.qual_id option[value=${defaultValue}]`).attr('selected', true);

select2:

<script type="text/javascript">
$('.qual_id').select2({
  width: 'resolve',
  maximumSelectionLength: 2
});
</script>

if i remove multiple from select tag and and do it without select2 with one id, it is working fine, but how can i do it by selecting multiple values in select.

Console:

Uncaught Error: Syntax error, unrecognized expression: .qual_id option[value=1,2]

score 2 · Accepted Answer · answered Oct 30 '19 at 09:01

2

I answered a similar question few months ago. You can refer to it from Dynamically add item to jQuery Select2 control that uses AJAX.

To answer your question, consider this example.

for(let i=0; i<jsonResponse.length; i++) {
    $(".qual_id").each(function() {
            if($(this).val() == jsonResponse[i]) {
            // select the option
        }
    });
}
$('.qual_id').trigger('change');

What you are looking for is .trigger() method. Refer Select2 Docs

answered Oct 30 '19 at 09:01

Digvijay

7,836
3
32
53

i tried var defaultValue = data.qualifs for(let i=0; i – Fayakon Oct 30 '19 at 09:06
Can you please create a jsfiddle for it & share the link. – Digvijay Oct 30 '19 at 09:07
1

Here https://jsfiddle.net/1cszw2yg/1/ will fulfil your requirement. – Digvijay Oct 30 '19 at 09:22
Thank you, how to set selected values on top of list? – Fayakon Oct 30 '19 at 09:28
To answer your 'Force the selected values to top', closest solution I could find is https://jsbin.com/cizehajema/2/edit?html,js,output. Also, please up-vote my 2nd comment (with jsfiddle link) for future learners to easily identity the correct answer. Thanks. – Digvijay Oct 30 '19 at 09:36
i read about .prepend in jquery which shows selected on top, how to use prepend in my case? – Fayakon Oct 30 '19 at 09:37

Andreas Saarva · Answer 2 · 2019-10-30T07:11:35.943

0

var defaultValue = [1,2];
$(`.qual_id`).val(defaultValue);

This should set values 1 and 2 to be selected by default.

edited Oct 30 '19 at 07:11

answered Oct 30 '19 at 06:56

Andreas Saarva

73
5

console:Uncaught Error: Syntax error, unrecognized expression: .qual_id option[value=1,2] – Fayakon Oct 30 '19 at 06:59
Wait, do you want to pre-select 2 values with select2? – Andreas Saarva Oct 30 '19 at 07:03
if default value is set to 1 or 2, or both when page loads that value should be pre selected. – Fayakon Oct 30 '19 at 07:04
I've edited my comment, missunderstood what you wanted initially, hope new edit helps! – Andreas Saarva Oct 30 '19 at 07:12
how to set them as selected? and everything else non selected? – Fayakon Oct 30 '19 at 07:22

Ajax selecting multiple values in select2

2 Answers2