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

How can i load data from ajax to Chosen jquery?

提问by Brian Crist

I have use chosen at http://harvesthq.github.io/chosen/. Ok, i testing it load data from ajax . I founding anywhere, maybe no someone success with them.

我在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>

<select id="cb_info" class="cb_bu_info"></select>

The data form ajax as

数据形式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}]

Well , it's look ok , but when i run it , result not show in select option, see browser dev tool , I've not seen error. Anything is ok.What's the problem happen in here? Notes: only use Chosen Jquery

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

采纳答案by CodeGodie

After checking out the Chosen docs, there seems to not be a "source" option. What you need to do is first run your Ajax call, then fill your select options. Once the select is all filled, then run Chosen on that select element.

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

I would use the following JS code:

我将使用以下 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%" });
})

回答by Brian Crist

Ok, After some time with the help of suggestions from everybody, I have done

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

 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);
                }
            });
        }

And , I think this is an answer and everyone else can find it .Thank you.

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

回答by Gagan Jaura

I have changed your jsfiddle. Try this out http://jsfiddle.net/GaganJaura/by4d528c/2/

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

I have moved the chosen() to bottom.

我已将 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();

回答by Bablu Ahmed

You can try as follows it works for me

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

$.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");
            }               
        }
    });

回答by wardah amaliyah

try this. it works for me. please pay attention to the bold text

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

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");
    });
    }
});
}