javascript – 如何加载JSON数据以将其与select2插件一起使用

我想为我的项目使用select2插件.我遵循了 this的例子,但对我来说并不奏效.

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: The AJAX results did not return an array in the results key of the response.

我在哪里犯错?

解决方法

看起来您正在使用Select2 4.0,从您提供的链接到示例和您收到的错误消息.然而,您的代码是针对以前版本的Select2编写的.

如果要继续使用Select2 4.0:

(1)将结果ajax选项更改为processResults.

(2)更改processResults函数,使其返回的对象的result属性是一个对象数组,其中每个对象都有一个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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)