jQuery Select2 - 使用 JSON 作为本地数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18161362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select2 - use JSON as local data
提问by ChrisG
I can get this to work...
我可以让这个工作......
var options = [{id: 1, text: 'Adair, Charles'}]
$('#names').select2({
data: options,
})
But i cant work out how to get from here...
但我不知道如何从这里到达...
alert(JSON.stringify(request.names)) gives me...
警报(JSON.stringify(request.names)) 给我...
[{"id":"1","name":"Adair,James"},
{"id":"2","name":"Anderson,Peter"},
{"id":"3","name":"Armstrong,Ryan"}]
To something that Select2 will accept as local data
Select2 将接受为本地数据的内容
回答by surfmuggle
Load data from a local array
从本地数组加载数据
The webpage of jquery-select2with the examples contains a demo to use Select2with local data (an array).
带有示例的jquery-select2网页包含一个用于Select2本地数据（数组）的演示。
The html
html
<input type="hidden" id="e10" style="width:300px"/>
The javascript
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 load data if array has no text property
如果数组没有文本属性，则 Select2 加载数据
For your question the example e10_2is relevant
对于您的问题，该示例e10_2是相关的
<input type="hidden" id="e10_2" style="width:300px"/>
To achive that you need the function format()as seen below:
要实现这一点，您需要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
});
});
This is the output:
这是输出：
Hint
暗示
To see the source code of each example it is best to use the network tab of the chrome dev tools and take a look of the html source before javascript kicks in.
要查看每个示例的源代码，最好使用 chrome 开发工具的网络选项卡，并在 javascript 启动之前查看 html 源代码。
回答by Emeka Mbah
Just to add. This also worked for me:
只是为了补充。这也对我有用：
HTML:
HTML：
<select id="names" name="names" class="form-control"></select>
Javascript
Javascript
$('#names').select2();
var options = $('#names');
$.each(sampleArray, function() {
options.append($("<option />").val(this.id).text(this.name));
});
回答by DotNetBeliever
As an update for this old post, having custom properties for id and text is not directly supported anymore since 4.0.0+ version.
作为这篇旧帖子的更新，自 4.0.0+ 版本起不再直接支持 id 和 text 的自定义属性。
See hereon "The id and text properties are strictly enforced" text block. You must create a $.map object as a workaround.
请参阅此处的“严格执行 id 和文本属性”文本块。您必须创建一个 $.map 对象作为解决方法。
Even more, working with an [input type="hidden"] is now deprecated as all core select2 options now support the [select] html object.
更重要的是，现在不推荐使用 [input type="hidden"]，因为所有核心 select2 选项现在都支持 [select] html 对象。
Have a look to John S' answer on this postas well.
也看看约翰 S对这篇文章的回答。
