在具有 optGroup 的 select2 中选择一个值答案

【问题标题】：Selecting a value in select2 having optGroup在具有 optGroup 的 select2 中选择一个值
【发布时间】：2015-07-14 03:50:51
【问题描述】：

我正在向 select2 提供以下数据输入

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

我将 select2 初始化为：

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

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

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

但是，值“item1”被选中，而不是值“all”。如何选择值item1？

【问题讨论】：

我认为这与 item1 是子对象的事实有关，它不知道
哦...但是如何选择子对象？谢谢..
我发现这个fiddle 可能有帮助，你似乎有类似的对象结构
去掉childrens中的“s”，应该是children。
是的，我的错..这是孩子们。我在上面编辑过同样的内容..谢谢

标签： javascript jquery jquery-select2

【解决方案1】：

要使用select2 设置选定的值，您应该使用：

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

来自release notes：

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

【讨论】：

但这是正确的做法吗？我的意思是 $(parent).select2('item1') 和 $(parent).val('item1') 有什么区别。
第一种方法仍然有效，但将在下一个版本中删除。实际上第二种方法就像普通选择一样。这样，如果您将插件添加到现有代码中，您的 js 仍然可以工作

【解决方案2】：

JSFiddle 其中 item1 被选中。

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

我试图让this demo 向您展示它的工作原理。该演示使用select 标记作为空的和现有select 元素的选择器。确实，我不知道你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>

【讨论】：

【解决方案4】：

我不确定您的意思是在开始时选择了值“All”，还是您想通过代码选择“item1”但它不起作用。我觉得奇怪的是“全部”被选为值，因为它应该被视为一个类别，即使添加

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

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

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

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

如果我添加

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

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

您能否向我们展示整个代码，包括您页面的 html（至少与选择相关的部分）。我试过这个（见 plunker：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>

它从选择 item1 开始，而“All”被视为一个类别。所以也许这只是因为您的代码/HTML 中有问题。
您使用的是哪个版本的 Select2？我正在使用 2-4.0.0

【讨论】：