Select2 - 使用 JSON 作为本地数据

Posted 2023-05-07

【中文标题】Select2 - 使用 JSON 作为本地数据

【英文标题】：Select2 - use JSON as local data

【发布时间】：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

【参考方案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。