Select2 - 使用JSON作为本地数据

Question

我可以让这个工作......

var options = [{id: 1, text: 'Adair, Charles'}]  
$('#names').select2({
    data: options,
})

但我无法弄清楚如何从这里出发......

alert（JSON.stringify（request.names））给了我......

[{"id":"1","name":"Adair,James"},
{"id":"2","name":"Anderson,Peter"},
{"id":"3","name":"Armstrong,Ryan"}]

对于Select2将接受为本地数据的内容

Answer 1

从本地阵列加载数据

包含示例的jquery-select2网页包含使用Select2 with local data (an array) 的演示。

html

<input type="hidden" id="e10" style="width:300px"/>

javascript

$(document).ready(function() { 

    var sampleArray = [{id:0,text:'enhancement'}, {id:1,text:'bug'}
                       ,{id:2,text:'duplicate'},{id:3,text:'invalid'}
                       ,{id:4,text:'wontfix'}];

    $("#e10").select2({ data: sampleArray });

});

如果数组没有文本属性，则选择2加载数据

对于您的问题，示例e10_2是相关的

<input type="hidden" id="e10_2" style="width:300px"/>

要实现您需要format()功能，如下所示：

$(document).ready(function() { 

    // tell Select2 to use the property name for the text
    function format(item) { return item.name; };

    var names = [{"id":"1","name":"Adair,James"}
             , {"id":"2","name":"Anderson,Peter"}
             , {"id":"3","name":"Armstrong,Ryan"}]

    $("#e10_2").select2({
            data:{ results: names, text: 'name' },
            formatSelection: format,
            formatResult: format                        
    });

});

这是输出：

提示

要查看每个示例的源代码，最好使用chrome dev工具的网络选项卡，并在javascript启动之前查看html源代码。

Answer 2

作为此旧帖子的更新，自4.0.0+版本起，不再支持自定义ID和文本属性。

请参阅here上的“严格执行id和文本属性”文本块。您必须创建$ .map对象作为变通方法。

更多的是，现在不推荐使用[input type =“hidden”]，因为所有核心select2选项现在都支持[select] html对象。

请看John S的答案on this post。

Answer 3

只是添加。这对我也有用：

HTML：

<select id="names" name="names" class="form-control"></select>

的Javascript

$('#names').select2();

var options = $('#names');

$.each(sampleArray, function() {
    options.append($("<option />").val(this.id).text(this.name));
});