How To Populate Dropdownlist With JSON Data As Ajax Response In JQuery

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. Below is

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

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

Solution 3:

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.

Solution 4:

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

Solution 5:

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