選擇具有optGroup的select2中的值

Question

我將以下數據輸入給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 ”被選中。 如何選擇value item1？

Answer 1

要使用select2設置所選值，您應該使用：

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

從發行說明 ：

您應該直接在底層元素上調用.val。 如果需要第二個參數（triggerChange），還應該在元素上調用.trigger（“change”）。

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

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

Answer 3

我不確定你是否意味着在開始時選擇值“全部”，或者如果你想通過代碼選擇“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

Answer 4

我試着讓這個演示向你展示它的工作原理。 該演示使用select標記作為空和現有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>