How to bind data from ajax to chosen jquery?

Question

I have used chosen jquery from

https://github.com/harvesthq/chosen/releases

I binding data from ajax webservices , seem it's not working.Data not load in select.

  $(".cb_bu_info").chosen({
                no_results_text: "Oops, nothing found!",
                width: "50%",
                source: function () {
                    $.ajax({
                        type: "POST",
                        url: "../BUS/WebService.asmx/LIST_BU",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        //beforeSend: function () { $('ul.cb_bu_info').empty(); },
                        success: function (data) {
                            $("#cb_bu_info").html('');
                            $.each($.parseJSON(data.d), function (idx, obj) {
                                $("#cb_bu_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
                            });
                        },
                        error: function (data) {
                            console.log(data.d);
                            alert("An error occurred !");
                        }
                    });
                }
            });

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

Thank guys.

http://stackoverflow.com/questions/2194992/jquery-is-not-defined my guess you have number 2 there — guradio, Sep 17 '15 at 09:45
https://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page — rrk, Sep 17 '15 at 09:45
No no , the problem is not load data to select in here , not jquery . Please read it clearly .Thank you. — Brian Crist, Sep 17 '15 at 09:49

score 0 · Answer 1 · edited Apr 03 '17 at 11:13

You can use this example once the page loads, then load it with countries in select list.

Make sure you have added references.

<select id='CountryName'>
<option> </option>
</select>

$(document).ready(function () {
    var frontDropdown = "";
    $.ajax({
        url: baseUrl + "GetBPCountriesCombo",
        type: "GET",
        async: true,
        success: function (result) {
            frontDropdown += "<option value='null'> Select Country </option>";
            $.each(result, function (i, data) {
                frontDropdown += "<option " + " value=" + data.CountryId + ">" + data.CountryName + "</option>";
            })
            $('#CountryName').append(frontDropdown).trigger('chosen:updated').css("width", "auto");;
        },
        error: function () {
            alert("An error occurred !");
        }
    });
});

How to bind data from ajax to chosen jquery?

1 Answers1