如何在 select2 多选中预选值？

Posted 2023-05-07

【中文标题】如何在 select2 多选中预选值？

【英文标题】：How to pre-select values in select2 multi select?

【发布时间】：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框时如何显示它们？

【参考方案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
    ]
)