Select2 - 使用 JSON 作为本地数据答案

【问题标题】：Select2 - use JSON as local dataSelect2 - 使用 JSON 作为本地数据
【发布时间】：2013-08-12 06:02:34
【问题描述】：

我可以让它工作......

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 将接受为本地数据的内容

【问题讨论】：

这个 Select2 是什么，你能解释一下吗？
选择2：ivaynberg.github.io/select2

标签： javascript jquery jquery-select2

【解决方案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 开发工具的网络选项卡，并在 javascript 启动之前查看 html 源代码。

【讨论】：

谢谢，我实际上遇到了 2 个错误，这让我很困惑，你指出的格式丢失了，还有 var names = jQuery.parseJSON(optionString);需要将 JSON 字符串转换为 select2 将使用的对象。再次感谢。
很高兴我能帮上忙。未来的提示：如果您有更多代码，最好将其包含在您的问题中。这有助于其他人更快地帮助您。此外，如果您有来自 chrome 开发工具的错误消息（请参阅我的个人资料以获取链接），最好也包含它们。
感谢您的提示，但我自己更像一个萤火虫人。
在哪里可以找到data 属性的键，例如results 或name
如果您的数组没有文本属性，您能否发布一个加载数据的工作小提琴？因为，即使在复制/粘贴您的代码之后，我也没有找到任何结果。

【解决方案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));
});

【讨论】：

【解决方案3】：

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

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

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

也可以看看 John S 的回答 on this post。

【讨论】：