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 }); });
这是输出:
暗示
要查看每个示例的源代码,最好使用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)); });