Javascript 在select2中选择具有optGroup的值

我为select2提供以下数据输入

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

我将select2初始化为：

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

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

---

但是，不是选择值“项1”而是选择值“全部”。如何选择值项1？

要使用

select2设置所选值，您应该使用：

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

从：

您应该直接在基础元素上调用.val。如果需要第二个参数（triggerChange），还应该
元素上的call.trigger（“change”）

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

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

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

它不会为我选择“全部”。如果我加上

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

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

如果我加上

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

它不会为我选择“全部”，它只会显示一个空白的选择。所以我认为你的代码一定有问题，因为在一个干净的页面中，似乎没有办法选择“全部”

你能给我们看完整的代码吗，包括你页面的html（至少是与select相关的部分）。我已经试过了（请看这里的plunker:）


$（文档）.ready（函数（）{
数据=[{
“id”：“全部”，
“文本”：“全部”，
“儿童”：[{
“id”：“项目1”，
“文本”：“项目1”
}, {
“id”：“项目2”，
“文本”：“项目2”
}]
}];
$（“.select2 text”）。选择2({
“数据”：数据
});
});

它从item1 selected开始，而“All”被视为一个类别。因此，也许这只是因为您的代码/HTML中有错误。

您使用的是Select2的哪个版本？我正在使用2-4.0.0来向您展示它的工作原理。演示使用
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>


数据=[{
“id”：“全部”，
“文本”：“全部”，
“儿童”：[{
“id”：“项目1”，
“文本”：“项目1”
}, {
“id”：“项目2”，
“文本”：“项目2”
}]
}];
$（'select'）。选择2({
“数据”：数据
});
$（'select'）。选择2（“val”，“item2”）；
其中选择了item1

JS:

HTML:


我认为这与item1是子对象这一事实有关，它不知道哦。。。但是如何选择子对象呢？谢谢..我发现这可能会有帮助，你似乎有一个类似的对象结构从
儿童中删除“s”，它应该是
儿童
。是的，我的错。。是孩子们，我已经编辑了上面的内容。。谢谢，但这是正确的方法。我的意思是$（parent.select2（'item1'）和$（parent.val（'item1'）之间有什么区别。第一个方法仍然有效，但将在下一个版本中删除。实际上，第二种方法类似于普通选择。这样，如果您将插件添加到现有代码中，您的js仍能正常工作
<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>

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

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']);

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