Select2 – 使用JSON作为本地数据

我可以让这个工作……

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

从本地arrays加载数据

带有示例的jquery-select2的网页包含一个演示,用于将Select2 与本地数据(数组)一起使用

HTML

  

这个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是相关的

  

要实现您需要函数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 }); }); 

这是输出:

选择2  -  pimp我的选择框

暗示

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

作为此旧post的更新,自4.0.0+版本起,不再支持具有id和text的自定义属性。

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

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

看看John S 在这篇文章中的答案。

只是补充一下。 这也对我有用:

HTML:

  

使用Javascript

 $('#names').select2(); var options = $('#names'); $.each(sampleArray, function() { options.append($("").val(this.id).text(this.name)); });