如何加载JSON数据以将其与select2插件一起使用
How to load JSON data to use it with select2 plugin
我想在我的项目中使用select2插件。我遵循了这个示例,但它对我不起作用。
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"}
]
脚本:
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:
<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>
这是我使用console.log
:测试代码时的结果
Select2:AJAX结果未在响应的
results
键中返回数组。
我在哪里犯了错误?
从您提供的示例链接和收到的错误消息来看,您似乎正在使用Select2 4.0。但是,您的代码是为以前版本的Select2编写的。
如果您想继续使用Select2 4.0:
(1) 将results
ajax选项更改为processResults
。
(2) 更改processResults
函数,使其返回的对象的results
属性是一个对象数组,其中每个对象都有一个id
和一个text
属性。一种方法是使用$.map()
函数从ajax调用返回的数组创建一个新数组。
processResults: function (data) {
return {
results: $.map(data, function(obj) {
return { id: obj.ime, text: obj.ime };
})
};
}
您也可以取消formatResult
选项。
(3) 使用<select>
元素,而不是<input>
元素。
<select id="stavka" name="stavka" class="form-control js-example-responsive"></select>
jsfiddle
试试这个:
$.getJSON("djubrivo.php", function (json) {
$("#inputs").select2({
data: json,
width: "180px"
});
});
示例json:
{
results:{
{id:0,text:"enhancement"},
{id:1,text:"bug"},
{id:2,text:"duplicate"},
{id:3,text:"invalid"},
{id:4,text:"wontfix"}
}
}
相关文章:
- 如何在Angular2中使用jQuery插件
- 可以前端maven插件使用节点,npm已经安装
- 如何按字母顺序对select2(jQuery插件)选项进行排序
- 如何加载JSON数据以将其与select2插件一起使用
- 设置要在 select2 插件中选择的最小值
- 在 Select2 jquery 插件中取消选择选项
- 将 select2 插件与 Zepto 一起使用
- 动态添加的元素上的事件处理程序不适用于 select2 插件
- 在select2插件中引入ajax调用时的延迟
- 如何使用HTML5'使用Jquery的本地存储's select2插件
- 使Jquery Autocomplete或Select2插件在淘汰foreach绑定中工作
- 在AngularJS应用程序中使用select2插件
- django select2插件中所有选定项目的列表
- 是否有办法让jQuery插件select2保留每个选择选项的类?
- 如何在php中获得select2(插件)标签值
- 如何停止选择框使用select2插件
- 如何在select2插件中设置选择值
- 如何将复选框添加到JQuery Select2插件中
- 多选字段(Jquery Select2插件)
- 使用 Select2 插件读取的 JSON 文件