javascript - 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 本地数据（数组）的演示。

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

});

如果数组没有文本属性，则 Select2 加载数据

对于您的问题，该示例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 开发工具的网络选项卡，并在 javascript 启动之前查看 html 源代码。

Answer 2

只是补充。这也对我有用：

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

Answer 3

作为此旧帖子的更新，自 4.0.0+ 版本以来不再直接支持 id 和 text 的自定义属性。

请参阅此处的“严格执行 id 和文本属性”文本块。您必须创建一个 $.map 对象作为解决方法。

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

也可以看看 John S在这篇文章中的回答。