如何将数据从 ajax 加载到 Chosen jquery？答案

【问题标题】：How can i load data from ajax to Chosen jquery?如何将数据从 ajax 加载到 Chosen jquery？
【发布时间】：2015-12-21 20:26:05
【问题描述】：

我已经使用 http://harvesthq.github.io/chosen/ 选择。好的，我测试它从 ajax 加载数据。我在任何地方创立，也许没有人能和他们一起成功。

<script src="theme/js/jQuery-2.1.3.min.js"></script>
    <link href="theme/chosen_v1.4.2/chosen.css" rel="stylesheet" />
    <script src="theme/chosen_v1.4.2/chosen.jquery.js"></script>
      <script type="text/javascript" charset="utf-8">
       $(document).ready(function () {
           $(".cb_bu_info").chosen({
               width: "95%",
               source: function (data) {
                   $.ajax({
                       type: "POST",
                       url: "../BUS/WebService.asmx/LIST_BU",
                       contentType: "application/json; charset=utf-8",
                       dataType: "json",
                       success: function (data) {
                           $("#cb_info").html('');
                           //$.each($.parseJSON(data.d), function (idx, obj) {
                           $.each(data, function (idx, obj) {
                               $("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
                           });  
                          //$("#cb_info").trigger("liszt:updated");
                       },
                       error: function (data) {
                           console.log(data.d);
                       }
                   });
               }
           });

           $("#cb_info").trigger("liszt:updated");
        });
    </script>

&lt;select id="cb_info" class="cb_bu_info"&gt;&lt;/select&gt;

ajax的数据形式

[{"BU_ID":"B01","BU_NAME":"Agro Feed","BU_DES":"Agro Feed","EDIT_DATE":"2015-05-05T00:00:00","EDIT_BY":"","FLAG":false},{"BU_ID":"B02","BU_NAME":"Agro Farm","BU_DES":"Agro Farm","EDIT_DATE":"2015-05-05T00:00:00","EDIT_BY":"","FLAG":false}]

嗯，看起来不错，但是当我运行它时，结果没有显示在选择选项中，请参阅浏览器开发工具，我没有看到错误。一切正常。这里发生了什么问题？注意：只使用选择的 Jquery

【问题讨论】：

你必须先做一个var data = JSON.parse(obj); 然后data.BU_ID。它会工作
亲爱的@Gagan Jaura。你确定吗？ .
是的。如果您可以制作 jsFiddle，那么我可以向您展示如何制作。
当您在 Ajax 成功时使用 console.log(data) 时是否收到 JSON 响应？
你能回答 CodeGodie 的答案吗？关键在于数据。

标签： javascript jquery html select jquery-chosen

【解决方案1】：

查看 Chosen 文档后，似乎没有“来源”选项。您需要做的是首先运行您的 Ajax 调用，然后填写您的选择选项。一旦选择全部填满，然后在该选择元素上运行选择。

我会使用下面的 JS 代码：

var url = "../BUS/WebService.asmx/LIST_BU";
$.getJSON(url, function(json){
    var $select_elem = $("#cb_info");
    $select_elem.empty();
    $.each(json, function (idx, obj) {
        $select_elem.append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
    });
    $select_elem.chosen({ width: "95%" });
})

【讨论】：

是的，没错。不是“来源”。我理解你说的 1：运行 ajax 并绑定数据选择 .2:run select as selected
另外，如果您只是获取 JSON，我会改用 $.getJson
谢谢你，我会记下来的。这是这个问题的答案
很高兴我能提供帮助。谢谢你，保重。
这对我有帮助，虽然是间接的。在我的情况下，下拉列表绑定得很好，但选择似乎不起作用，因为我在函数之后调用它（使用 ajax 处理数据）。可能选择的是没有获取数据。在将数据绑定到 dropdow 后，在函数内部启动所选调用就可以了。

【解决方案2】：

好的，经过一段时间在大家的建议下，我已经完成了

 function load_cb_info() {
            $.ajax({
                type: "POST",
                url: "../BUS/WebService.asmx/LIST_BU",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    $("#cb_info").html('');
                    $.each($.parseJSON(data.d), function (idx, obj) {
                    //$.each(data, function (idx, obj) {
                        $("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
                    });
                    $("#cb_info").trigger("liszt:updated");
                    $("#cb_info").chosen({ width: "95%" });
                },
                error: function (data) {
                    console.log(data.d);
                }
            });
        }

而且，我认为这是一个答案，其他人都可以找到它。谢谢。

【讨论】：

【解决方案3】：

我已经改变了你的 jsfiddle。试试这个http://jsfiddle.net/GaganJaura/by4d528c/2/

我已将 selected() 移至底部。

$("#cb_info").empty();
$.each(data, function (idx, obj) {
    $("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
}); 
  $("#cb_info").trigger("liszt:updated");

$("#cb_info").chosen();

【讨论】：

你真的需要那个触发功能吗？
不。实际上，我只是使用了他的 Fiddle 并使其工作。不需要那个触发函数。
亲爱的 Gagan，我认为应该
现在才这样做，我发现我需要触发器。不过请注意，根据docs，我必须使用$("#cb_info").trigger("chosen:updated");。

【解决方案4】：

你可以尝试如下它对我有用

$.ajax({
        type: "POST",
        url: url,
        data: formData,
        processData: false,
        contentType: false,
        success:function(data){
            if($.trim(data) != "no"){
                $("#PROGRAM_ID").html(data);
                $("#PROGRAM_ID").trigger("chosen:updated");
            }               
        }
    });

【讨论】：

【解决方案5】：

试试这个。这个对我有用。请注意粗体字

Ext.Ajax.request({
url:'<?php echo base_url()."index.php/";?>ttemuan31a/cari_divisi',
method:'post',
params:{

        divisi:vdivisi

    },
success:function(data)
{
    $("#divisi").chosen();
        //document.getElementById('detail_divisi').innerHTML=response.responseText;
    $('#divisi').empty();

    $.each(JSON.parse(**data.responseText**), function(i, item) {
        $('#divisi').append('<option value="'+item.id+'">'+item.namadivisi+'</option>');
        $("#divisi").trigger("chosen:updated");
    });
    }
});
}

【讨论】：