CODEWITHSUNDEEP
javascriptjqueryjsondrop-down-menu
rajesh kumar
rajesh kumar

Reputation: 11

how to bind the JSON data into dropdown list using Jquery?

I am getting this result as JSON output. How do I bind this output in my dropdown using jquery ?

This is jquery code:

function OnSuccess(response) {  

     var ddlCity = $("[id*=SiteMaster_ddlCity]");
     var ddlState = $("[id*=SiteMaster_ddlState]");
     ddlCity.empty().append('<option selected="selected" value="0">Please select</option>');
     ddlState.empty().append('<option selected="selected" value="0">Please select</option>');                            
     $.each(response.d, function () {
           ddlCity.append($("<option></option>").val(this['CITY']).html(this['CITY']));
                ddlState.append($("<option></option>").val(this['STATE']).html(this['STATE']));
            });

     //  alert(response.d);
}

This is the code returning the JSON output 

return JsonConvert.SerializeObject(dsCityStatebyZipCode, Formatting.Indented);

Upvotes: 1

Views: 1779

Answers (1)

sainanky
sainanky

Reputation: 507

you need to apply the index and value in each loop to get the proper value here is the correct syntax to use it

$('.dropdown-content').html('');  //html element where you need to bind the data
    var parseData = jQuery.parseJSON(result.d); // parse the data
    var html = '';            
    $.each(parseData, function (i, v) {   // get data using each loop
        html += "<option>" + v.name+ "</option>";
    });

    $('.dropdown-content').html(html);  // bind the html to targeted element

Upvotes: 3

Related Questions