How to pre-select values ​​in select2 multi select?

Question

I have multiple choices, for example:

<select multiple="multiple" class="myList"> <option value="1" selected="selected">Apple</option> <option value="2" selected="selected">Mango</option> <option value="3" selected="selected">Orange</option> </select> 

Now, in addition to the parameters that should be selected in the selection window, I need an additional ajax function that would give values ​​from a remote source.

Here is my code for select2

 $(function(){ $(".myList").each(function(){ $(this).select2({ placeholder: "Search for fruits", minimumInputLength: 2, multiple: true, id: function(e) { return e.id+":"+e.name; }, ajax: { url: "https://localhost:8443/fruit_search", dataType: 'json', data: function(term, page) { return { q: term }; }, results: function(data, page) { var frts=[]; $.each(data,function(idx,Frt){ frts[frts.length]=Frt; }); return { results: frts }; } }, initSelection: function(element, callback) { var data = []; }, formatResult: formatResult, formatSelection: formatSelection }); }); }); 

But I get an error message:

Error: the 'id' option is not allowed for Select2 when connecting to <select> .

But when I use <input type="hidden"> , then where should I store the preselected parameters? How to show them when select2 window appears?

Answer 1

If you only have values, you can use 'val' to get preselected values ​​like this.

 var PRESELECTED_FRUITS = [ '1','2','3']; $('.myList').select2({}).select2('val', PRESELECTED_FRUITS); 

Answer 2

You can use the "data" function to set the initial values:

 var PRESELECTED_FRUITS = [ { id: '1', text: 'Apple' }, { id: '2', text: 'Mango' }, { id: '3', text: 'Orange' } ]; $('.myList').select2('data', PRESELECTED_FRUITS) 

Note. The "val" function is another way to set the initial values, but you only specify identifiers with this function. In this case, you will have to provide the initSelection function, which builds objects from identifiers.

Also note that the id parameter is not the only parameter that forces you to use hidden input. You cannot use the "ajax" parameter with a select element.

Regarding the id option, I don’t think you need it. Just put the logic in the ajax "results" function so that it creates an array of objects that have the correct id and text properties, or the server returns objects with these properties.

jsfiddle demo

Answer 3

For setpoints, use the "val" property to preset the selected values.

 $(this).select2({ val: ["1","2","3"] } 

But why not remove the id function? If possible, you can return the correct "identifier" from the server without having to use the id function.

Answer 4

You can also load values ​​in HTML:

 <select class="selector" multiple="multiple" > <option selected value="1">Apple</option> <option selected value="2">Mango</option> <option selected value="3">Orange</option> </select> 

And connect select2 to it:

 $(".selector").select2({ width: 'inherit', minimumInputLength: 2, minimumResultsForSearch: 10, placeholder: "Search for fruits", ajax: { delay: 1000, url: "/bla_foo", dataType: 'json', type: "GET", } }) 

and select2 will pre-fill the form.

Answer 5

 $("#select2").select2('data', {id: '3', text: 'myText'});