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?

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?

• javascript
• jquery
• jquery-select2

• I think it's got something to do with the fact that item1 is child object, and it doesn't know – Sterling Archer Commented May 4, 2015 at 16:56
• ooh ... but how to select the child object ? thanks .. – stack_alok Commented May 4, 2015 at 16:57
• I found this fiddle that may help, you seem to have a similar object structure – Sterling Archer Commented May 4, 2015 at 16:59
• Remove the "s" from childrens, it should be children. – Kevin Brown-Silva Commented May 4, 2015 at 18:14
• yes my bad .. it is children.I have edited the same above .. thanks – stack_alok Commented May 5, 2015 at 10:00

4 Answers 4

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

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>

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>

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