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

});

但我收到错误：

错误：选项＆＃39; id＆＃39;当附加到a时，不允许使用Select2 <select>元素。

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

Answer 1

您可以使用＆＃34;数据＆＃34;用于设置初始值的函数：

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

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

注意：＆＃34; val＆＃34; function是设置初始值的另一种方法，但您只能使用该函数指定ID。在这种情况下，你将不得不提供一个＆＃34; initSelection＆＃34;从ids构建对象的函数。

另请注意＆＃34; id＆＃34;选项不是强制您使用隐藏输入的唯一选项。你不能使用＆＃34; ajax＆＃34;带有select元素的选项。

至于＆＃34; id＆＃34;选项，我认为你不需要它。只需将逻辑放入ajax＆＃34;结果＆＃34;函数，因此它构建一个具有正确的id和text属性的对象数组，或让服务器返回具有这些属性的对象。

jsfiddle demo

Answer 2

要预设值，请使用＆＃39; val＆＃39;用于预设所选值的属性。

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

但为什么不删除＆＃39; id＆＃39;功能？如果可能，您可以返回正确的ID＃39;从服务器而不需要id函数。

Answer 3

您还可以将值加载到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将预填写表格。

Answer 4

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

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

4 个答案: