选择具有optGroup的select2中的一个值

I'm giving following data input to select2

我给select2提供以下数据输入。

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

and I'm initialising select2 as:

我将select2初始化为:

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

Now to select the value "item1", I did

现在要选择值“item1”，我做了

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

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

然而，“item1”的价值不是“全部”，而是被选中的。如何选择value item1?

4 个解决方案

#1

To set the selected value using select2 you should use:

要使用select2设置所选的值，您应该使用:

$(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.

您应该直接在底层元素上调用.val。如果需要第二个参数(triggerChange)，还应该在元素上调用.trigger(“change”)。
$("select").val("1"); // instead of $("select").select2("val", "1");

#2

JSFiddle where item1 is selected.

选择item1的JSFiddle。

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>

#3

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元素的选择器。的确，我不知道你说的父母是什么意思:

<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>

#4

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

我不确定您是指值“All”在开始时被选中，还是您想通过代码选择“item1”，但它不起作用。我觉得奇怪的是，选择“All”作为值，因为它应该被视为一个类别，甚至可以通过添加

$(".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)

它将为我选择“item2”(这意味着选择项目的方法有效，尽管它不是最好的方法，正如Lelio Faieta的答案所述)

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"

它不会为我选择“All”，它只会显示一个空的选择。所以我认为你的代码一定有问题因为在一个干净的页面中似乎没有办法选择"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 )

可以向我们展示整个代码，包括页面的html(至少是与select相关的部分)。我已经尝试过了(请参阅下面的普兰克:http://plnkr.co/edit/m6pFUt?p =预览)

<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

它以选定的item1开头，而“All”被视为一个类别。也许只是因为你的代码/HTML出了问题。您正在使用什么版本的Select2 ?我用2-4.0.0

#1