如何在 select2 多选中预选值？答案

【问题标题】：How to pre-select values in select2 multi select?如何在 select2 多选中预选值？
【发布时间】：2014-12-31 01:11:00
【问题描述】：

我有这样的多重选择：

<select multiple="multiple" class="myList">
        <option value="1" selected="selected">Apple</option>
        <option value="2" selected="selected">Mango</option>
        <option value="3" selected="selected">Orange</option>
</select>

现在，除了必须在选择框中选择的那些选项外，我还想要额外的 ajax 功能，它可以从远程源提供值。

这是我的 select2 代码

$(function(){
    $(".myList").each(function(){

                $(this).select2({
                placeholder: "Search for fruits",
                minimumInputLength: 2,
                multiple: true,
                id: function(e) { 
                return e.id+":"+e.name; },
                ajax: {
                    url: "https://localhost:8443/fruit_search",
                    dataType: 'json',
                    data: function(term, page) {
                        return {
                            q: term
                        };
                    },
                    results: function(data, page) {
                    var frts=[];
                        $.each(data,function(idx,Frt){
                            frts[frts.length]=Frt;
                        });
                        return {
                            results: frts
                        };
                    }
                },
                initSelection: function(element, callback) {
                    var data = [];
                },
                formatResult: formatResult,
                formatSelection: formatSelection
                });
        });

});

但我得到了错误：

错误：当 Select2 附加到 <select> 元素。

但是当我使用<input type="hidden"> 时，我应该在哪里保留预先选择的选项？出现select2框时如何显示它们？

【问题讨论】：

标签： javascript jquery jquery-select2

【解决方案1】：

如果你只有值，那么你可以使用'val' 来获取这样的预选值。

var PRESELECTED_FRUITS = [ '1','2','3'];

$('.myList').select2({}).select2('val', PRESELECTED_FRUITS);

【讨论】：

我正在尝试使用它，但它对我不起作用，jsfiddle.net/wzshpjb1 对我来说，只有一个值被预先填充，我正在使用 select2 v4.0.6
@VishalB 您需要触发更改事件。类似$('selector').select2(); $('selector').val(['1', '2', '3']).trigger('change');

【解决方案2】：

您可以使用“数据”函数来设置初始值：

var PRESELECTED_FRUITS = [
    { id: '1', text: 'Apple' },
    { id: '2', text: 'Mango' },
    { id: '3', text: 'Orange' }
];

$('.myList').select2('data', PRESELECTED_FRUITS)

注意：“val”函数是另一种设置初始值的方法，但您只需使用该函数指定 id。在这种情况下，您必须提供一个“initSelection”函数，该函数从 id 构建对象。

另请注意，“id”选项并不是唯一迫使您使用隐藏输入的选项。您也不能将“ajax”选项与选择元素一起使用。

至于“id”选项，我认为您不需要它。只需将逻辑放在 ajax“结果”函数中，这样它就可以构建具有正确 id 和 text 属性的对象数组，或者让服务器返回具有这些属性的对象。

jsfiddle demo

【讨论】：

只是一个问题，如果 'PRESELECTED_FRUITS' 为空会发生什么？它会产生错误吗？还是 select2 不再加载？
我发现它不会产生错误。它仍应定期加载。

【解决方案3】：

要预设值，请使用 'val' 属性来预设所选值。

$(this).select2({
            val: ["1","2","3"]
    }

但是为什么不去掉'id'函数呢？如果可能的话，您可以从服务器返回正确的“id”而不需要 id 函数。

【讨论】：

【解决方案4】：

您还可以将值加载到 HTML 中：

<select class="selector" multiple="multiple" >
    <option selected value="1">Apple</option>
    <option selected value="2">Mango</option>
    <option selected value="3">Orange</option>
</select>

并将 select2 连接到它：

$(".selector").select2({
    width: 'inherit',
    minimumInputLength: 2,
    minimumResultsForSearch: 10,
    placeholder: "Search for fruits",
    ajax: {
        delay: 1000,
        url: "/bla_foo",
        dataType: 'json',
        type: "GET",
    }
})

select2 将预先填写表单。

【讨论】：

【解决方案5】：

$("#select2").select2('data', {id: '3', text: 'myText'});

【讨论】：

【解决方案6】：

$('select').select2({
    multiple: true,
    data: [
        {id: 1, text: 'Foo', selected: true},
        {id: 2, text: 'Bar', selected: true}
    ]
})

【讨论】：