How to populate dropdownlist with JSON data as ajax response in jQuery

Question

I am working on a j2ee application. In my application I have a drop-down list(or Select element). I want to populate this drop-down list with JSON data as a Ajax response.

Answer 1

try to change the jquery method variable, it might be causing the problem (i.e., you are using the data variable coming from the ajax callback PLUS are then trying to assign it to the item object in the jquery method - changed to obj):

        $.ajax({
            type: "GET",
            url:"/demo_trial_application/json_source",
            dataType: "json",
            success: function (data) {
                $.each(data.aaData,function(i,obj)
                {
                 alert(obj.value+":"+obj.text);
                 var div_data="<option value="+obj.value+">"+obj.text+"</option>";
                alert(div_data);
                $(div_data).appendTo('#ch_user1'); 
                });  
                }
          });
        });

Answer 2

I use "for"

var List;
 jQuery.ajax({
    url: "/demo_trial_application/json_source",
    type: "POST",
    dataType: "json",
    async: false,
    success: function (data) {
    List = data.aaData
        $('#ch_user1').empty();
        $('#ch_user1').append('<option value="">All</option>');
        for (i in List ) {
            $('#ch_user1').append('<option value="' + List[i].value + '">' + List[i].text + '</option>');
        }
    }
});

Answer 3

<div class="col-lg-4">
                                        <%--<input type="text" class="form-control" id="txtGender" />--%>
                                        <select class='form-control DropDown' id="txtGender"></select>
                                    </div>

    --------------------------------------------------------------------------------

     $(document).ready(function () {
                $.ajax({
                    type: "POST",
                    url: "AjaxCallGrid.asmx/GetDropDown",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (result) {
                        $('.DropDown').empty();
                        $('.DropDown').append("<option value='0'>---Select---</option>");
                        $.each(result.d, function (key, value) {
                            $('.DropDown').append($("<option></option>").val(value.iD).html(value.firstName));
                        });
                    }
                });
            });
    -------------------------------------------------------------------------
     [WebMethod]
        public  List<Students> GetDropDown()
        {
            DataTable dt = new DataTable();
            List<Students> result = new List<Students>();
            using (SqlConnection con = new SqlConnection(@"Data Source=DOS-PC\MARJI;Initial Catalog=examples;Integrated Security=True"))
            {
                using (SqlCommand cmd = new SqlCommand("select id,firstname from Students ", con))
                {
                    con.Open();
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(dt);
                    if (dt.Rows.Count > 0)
                    {
                        for (int i = 0; i < dt.Rows.Count; i++)
                        {
                            result.Add(new Students
                            {
                                iD = Convert.ToInt32(dt.Rows[i]["id"].ToString()),
                                firstName = dt.Rows[i]["firstname"].ToString()
                            }
                                );
                        }
                    }
                    return result;
                }
            }

Answer 4

Working with Laravel this is my solution:

$("#YOUR_DIV").on("change", function(){
    var selected = $(this).val();
    makeAjaxRequest(selected);
})

function makeAjaxRequest(opts){
    $.ajax({
        type: "GET",
        url : '{{ action('YOUR_CONTROLLER@YOUR_FUNCTION') }}',
        data: { opts: opts },
        success: function(data) {
            NEW_JS_FUNCTION(data);
        }
    });
}

function NEW_JS_FUNCTION(params) {
    $('#YOUR_DIV').empty();
    $('#YOUR_DIV').append('<option value="">ALL</option>');

    params.forEach(function(entry){
        $('#YOUR_DIV').append('<option value="' + entry.KEY+ '">' + entry.TEXT + '</option>');
    });

}

It works. Hope this can help.

Answer 5

Try as follows

<select id="xxx"></select>

success: function (response) {                   

     for (var i = 0; i < response.length; i++) {

           $("#xxx").append("<option value='" + response[i]["id"] + "'>" + response[i]["name"] + "</option>");

     }

}

Answer 6

We can populate dropdown like below . it's very easy for you all i guess.

var options = $("#options");
    $.getJSON("/Country/GetAll/", function(response) {
         $.each(response, function() {
         options.append($("<option />").val(this.Id).text(this.Name));
     });
  });