Select2.js v4.0: how set the default selected value with a local array data source?

Question

By using select2.js v4 plugin , how set the default selected value when I use a local array data for source?

for example with this code

var data_names = [{
  id: 0,
  text: "Henri",
}, {
  id: 1,
  text: "John",
}, {
  id: 2,
  text: "Victor",
}, {
  id: 3,
  text: "Marie",
}];

$('select').select2({
  data: data_names,
});

How set id 3 as the default selected value?

Watchdog

$("#id").select2().select2("val", 'oneofthevaluehere'); – Wojak

As of v4.1 just do {id: 3, text: "Marie", selected: true}. – Neck

Answer 1

$('.select').select2({
        data: data_names,
    }).select2("val",3);

Teaser

Answer 2

this worked for me with V4.0.3

$('.select').select2({
    data: data_names,
})
$('select').val(3);
$('select').trigger('change.select2');

Distract

This is the correct answer for v4. More compactly you can write $('.select').val(3).trigger('change'). Use trigger('change.select2') to notify only Select2 of the change. See select2.github.io/… – Chondro

Answer 3

It is better you send another attribute (selected in my case below) for select and use it to set the default value. I did something like below -

var data_names = [{
  id: 0,
  text: "Henri",
}, {
  id: 1,
  text: "John",
}, {
  id: 2,
  text: "Victor",
}, {
  id: 3,
  text: "Marie",
  selected: true
}];

then do

            $(".select").select2({
                data : data_names
            });
            data_names.forEach(function(name){
                if(name.selected) { 
                   $(".select").select2('val',name.id);
                }
            });

Shig

This is the correct answer for version 4.1. All you need is "selected: true" on your data element, should not trigger any events or call an API method. – Neck

Answer 4

It's worked for me.

$('#select').select2({data: data_names}).val(3).trigger('change')

Sundae