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?

Candlestand

I think it's got something to do with the fact that item1 is child object, and it doesn't know – Christabelle

ooh ... but how to select the child object ? thanks .. – Candlestand

I found this fiddle that may help, you seem to have a similar object structure – Christabelle

Remove the "s" from childrens, it should be children. – Ode

yes my bad .. it is children.I have edited the same above .. thanks – Candlestand

@SterlingArcher fiddle not working :( – Candlestand

Selecting item1 works fine by me. Please post the entire function where you call $(parent).select2("val",["item1"]); from. – Erymanthus

You example works for me. Take a look here: codepen.io/anon/pen/doMgry – Kierstenkieselguhr

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");

Kelcy

But is this the right way to do it.I mean what is the difference between $(parent).select2('item1') and $(parent).val('item1'). – Candlestand

The first method is still working but will be removed in the next release. And actually the second method is like for normal select. This way if you add the plugin to an existing code your js will be still working – Kelcy

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>

Mission

Answer 3

I'm not sure if you mean that the value "All" gets selected at start or if you want to select "item1" by code and it doesn't work. I find it strange that "All" gets selected as value since it should be treated as a category, even by adding

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

it won't select "All" for me. If i add

$(".select2-text").select2("val",["item2"]);

It will select "item2" for me (which means the method to select the item works, though it's not the best way, as stated in Lelio Faieta's Answer)

if i add

$(".select2-text").select2("val",["all"]);

it won't select "All" for me, it will just show me a blank select. So I think there must be an issue with your code because in a clean page there seems to be no way to select "All"

Can you show us the whole code, including the html of your page (at least the part relevant to the select). I have tried this (see plunker here: http://plnkr.co/edit/m6pFUt?p=preview )

<script>
$(document).ready(function() {
    data = [{
        "id": "all",
        "text": "All",
        "children": [{
            "id": "item1",
            "text": "item1"
        }, {
            "id": "item2",
            "text": "item2"
        }]
    }];

    $(".select2-text").select2({
        "data": data
    });
});
</script>
<select class="select2-text"></select>

And it starts with item1 selected, while "All" is treated as a category. So maybe it's just because something is wrong in your code/HTML.
What version of Select2 are you using? i'm using 2-4.0.0

Baltoslavic

Answer 4

I tried to make this demo to show you that it works. The demo, uses the select tag as a selector for an empty and existing select element. Indeed, I don't know what are you meaning by parent:

<select>
</select>
<script>
data = [{
    "id": "all",
    "text": "All",
    "children": [{
        "id": "item1",
        "text": "item1"
    }, {
        "id": "item2",
        "text": "item2"
    }]
}];

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

$('select').select2("val", ["item2"]);

</script>

Firebrick