如何在select2多选中预先选择值？

Question

我有这样的多重选择:

<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
                });
        });

});

但是我收到了错误:

错误:附加到<select>元素时,Select2不允许选项'id' .

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

Answer 1

如果您只有值,那么您可以使用'val'这样的预选值.

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

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

Answer 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"选项与select元素一起使用.

至于"id"选项,我认为你不需要它.只要把逻辑在Ajax"的结果"功能,所以它建立有合适的对象的数组id和text性质,或具有这些属性的服务器返回的对象.

jsfiddle演示

Answer 3

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

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

但是为什么不删除“ id”功能呢？如果可能，您可以从服务器返回正确的“ id”，而无需使用id函数。