web-dev-qa-db-ja.com

ajaxからChosenjqueryにデータをロードするにはどうすればよいですか？

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>

データは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のみを使用してください

javascriptjqueryhtmlselectjquery-chosen
5
Brian Crist

選択したドキュメントを確認した後、「ソース」オプションがないようです。あなたがする必要があるのは、最初にAjax呼び出しを実行し、次に選択したオプションを入力することです。選択がすべて満たされたら、その選択要素でChosenを実行します。

次の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%" });
})
2
CodeGodie

さて、皆さんからの提案の助けを借りてしばらくして、私はやった

 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
Brian Crist

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();
2
Gagan Jaura

あなたはそれが私のために働く次のように試すことができます

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

これを試して。わたしにはできる。太字のテキストに注意してください

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