Javascript 如何加载 JSON 数据以将其与 select2 插件一起使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28355083/
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
How to load JSON data to use it with select2 plugin
提问by dert detg
I want to use select2 plugin for my project. I followed thisexample, but it doesn't work for me.
我想为我的项目使用 select2 插件。我遵循了这个例子，但它对我不起作用。
JSON output:
JSON 输出：
[
{"ime":"BioPlex TM"},
{"ime":"Aegis sym agrilla"},
{"ime":"Aegis sym irriga"},
{"ime":"Aegis sym microgranulo"},
{"ime":"Aegis sym pastiglia"},
{"ime":"Agroblen 15816+3MgO"},
{"ime":"Agroblen 18816+3MgO"},
{"ime":"Agrobor 15 HU"},
{"ime":"Agrocal (Ca + Mg)"},
{"ime":"Agrocal (Ca)"},
{"ime":"Agrogold"},
{"ime":"Agroleaf Power 12525+ME"},
{"ime":"Agroleaf Power 151031+ME"},
{"ime":"Agroleaf Power 202020+ME"},
{"ime":"Agroleaf Power 311111+ME"},
{"ime":"Agroleaf Power Ca"},
{"ime":"Agrolution 14714+14 CaO+ME"},
{"ime":"Agrovapno dolomitno"},
{"ime":"Agrovit HSF"},
{"ime":"Agrovit P"},
{"ime":"Agrozin 32 T"},
{"ime":"Albatros Hydro"},
{"ime":"Albatros Sprint"},
{"ime":"Albatros Standard"},
{"ime":"Albatros Universal"},
{"ime":"Algaren"},
{"ime":"AlgoVital ? Plus"},
{"ime":"Amalgerol PREMIUM"},
{"ime":"Amcolon \/ Novalon"},
{"ime":"Amcopaste"},
{"ime":"Aminosprint N8"},
{"ime":"AminoVital"},
{"ime":"Ammonium nitrate 33.5%"},
{"ime":"Ammonium nitrate with calcium sulfate"},
{"ime":"Ammonium sulfate"}
]
Script:
脚本：
function formatDjubrivo(data) {
return data;
}
function formatDjubrivo1(data) {
return data.ime;
$( "#inputs" ).change(function() {
console.log('prolazi klik');
var t = $( this ).val();
console.log(t);
if (t=='djubrivo') {
console.log('prolazi klik if');
$('#stavka').select2({
ajax: {
dataType : "json",
url : "djubrivo.php",
results : function (data) {
return {results: data};
}
},
formatResult : formatDjubrivo
});
}else {
console.log('nije djubrivo');
}
});
HTML:
HTML:
<div class="col-md-2" style="padding-right:0px;">
Vrsta Inputa
<select id="inputs" name="inputs" class="form-control js-example-responsive">
<option value="djubrivo">djubrivo</option>
<option value="pesticidi">pesticidi</option>
<option value="kultura">kultura</option>
<option value="voda">voda</option>
</select>
</div>
<div class="col-md-2" style="padding-right:0px;">
Stavka
<input id="stavka" name="stavka" class="form-control js-example-responsive">
</div>
This is the result when I test my code using console.log:
这是我使用console.log以下方法测试代码时的结果：
Select2: The AJAX results did not return an array in the
resultskey of the response.
Select2：AJAX 结果没有
results在响应的键中返回数组。
Where did I made mistake?
我哪里做错了？
回答by John S
It appears you are using Select2 4.0, both from the link you provide to the examples and from the error message you are receiving. Your code, however, is written for previous versions of Select2.
从您提供的示例链接和收到的错误消息来看，您似乎正在使用 Select2 4.0。但是，您的代码是为 Select2 的早期版本编写的。
If you want to continue to use Select2 4.0:
如果要继续使用Select2 4.0：
(1) Change the resultsajax option to processResults.
(1) 将resultsajax选项改为processResults.
(2) Change the processResultsfunction so the resultsproperty of the object it returns is an array of objects, where each object has an idand a textproperty. One way to do this is to use the $.map()function to create a new array from the one that is returned by the ajax call.
(2) 改变processResults函数，results使其返回的对象的属性是一个对象数组，其中每个对象都有一个id和一个text属性。一种方法是使用该$.map()函数从 ajax 调用返回的数组中创建一个新数组。
processResults: function (data) {
return {
results: $.map(data, function(obj) {
return { id: obj.ime, text: obj.ime };
})
};
}
You can also get rid of the formatResultoption.
您也可以摆脱该formatResult选项。
(3) Use a <select>element, instead of an <input>element.
(3) 使用<select>元素，而不是<input>元素。
<select id="stavka" name="stavka" class="form-control js-example-responsive"></select>
回答by Bruno Ribeiro
try this :
尝试这个 ：
$.getJSON("djubrivo.php", function (json) {
$("#inputs").select2({
data: json,
width: "180px"
});
});
example json :
示例 json ：
{
results:{
{id:0,text:"enhancement"},
{id:1,text:"bug"},
{id:2,text:"duplicate"},
{id:3,text:"invalid"},
{id:4,text:"wontfix"}
}
}
