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

Question

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

18

我有一个类似这样的多选框：

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

});

但是我得到了错误：

错误：当附加到

- JavaTechnical

6个回答

9

你可以使用"data"函数来设置初始值：

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

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

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

还要注意，“id”选项不是唯一强制您使用隐藏输入的选项。您也不能将“ajax”选项与select元素一起使用。

至于“id”选项，我认为您不需要它。只需在ajax“results”函数中放置逻辑，以便它构建具有适当的“id”和“text”属性的对象数组，或者让服务器返回具有这些属性的对象。 jsfiddle demo

- John S

只是一个问题，如果“PRESELECTED_FRUITS”为空会发生什么？它会产生错误吗？还是select2不再加载？ - Spyron10

我发现它不会产生错误，应该仍然可以正常加载。 - Spyron10

5

使用“val”属性来预设所选值。

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

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

- Ferry Kranenburg

2

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

- Eugene Kovalev

2

你可以将值加载到HTML中：

您还可以将值加载到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",
    }
})

and select2 will prefill the form.

- Pinguin Pinguin

0

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

- Manoj

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Manjeet Singh Chauhan · Accepted Answer

如果您只有值，那么您可以使用'val'来获取预先选择的值，像这样：

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

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