Selecting a value in select2 having optGroup

Question

I'm giving following data input to select2

data = [{     "id": "all",     "text": "All",     "children": [{         "id": "item1",         "text": "item1"     }, {         "id": "item2",         "text": "item2"     }] }]; 

and I'm initialising select2 as:

$(parent).select2({"data":data}); 

Now to select the value "item1", I did

$(parent).select2("val",["item1"]); 

However instead of value "item1" value "all" is getting selected. How to select value item1?

Answer 1

To set the selected value using select2 you should use:

$(parent).val("item1").trigger("change"); 

From the release notes:

You should directly call .val on the underlying element instead. If you needed the second parameter (triggerChange), you should also call .trigger("change") on the element.

$("select").val("1"); // instead of $("select").select2("val", "1"); 

Answer 2

JSFiddle where item1 is selected.

JS:

var data = [{     id: 'all',     text: 'All',     children: [{         id: 'item1',         text: 'item1'     }, {         id: 'item2',         text: 'item2'     }] }];  $('.js-example-data-array').select2({data:data});  $('.js-example-data-array').select2('val',['item1']); 

HTML:

<select class="js-example-data-array"> </select>