How do i bind the json data to a asp.net dropdownlist using jquery?

Question

I am trying to design a cascading dropdown. i am using 3 asp.net dropdowns. THe first one on page load loads the countries. Then when a country is selected i do a ajax call to a webmethod. I fetch the data for the teams belonging to that country. The data is in a dataset which i convert into JSON and then return it. On success what code do i need to add to bind the json data to the dropdown list. below is the code.

$(document).ready(function() {

      $('#ddlcountries').change(function() {

          debugger;

          var countryID = $('#ddlcountries').val();

          $.ajax({

              type: "POST",
              url: "Default.aspx/FillTeamsWM",
              data: '{"CountryID":' + countryID + '}',
              contentType: "application/json; charset=utf-8",
             dataType: "json",
              success: function(jsonObj) {


              /* WHAT CODE DO I ADD HERE TO BIND THE JSON DATA
                 TO ASP.NET DROP DOWN LIST. I DID SOME GOOGLING 
                 BUT COULD NOT GET PROPER ANSWER */ 


              },
              error: function() {
                  alert('error');
              }

          });

      });


  });

possible duplicate of [How do I add options to a DropDownList using jQuery?](http://stackoverflow.com/questions/317095/how-do-i-add-options-to-a-dropdownlist-using-jquery) — Philip Fourie, Feb 05 '12 at 17:40
Don't forget, if you want to read a client side modified dropdown list on a postback (C# or VB), you'll need to use Request.Form["Control-ID"] because the data in your second 2 dropdown lists were loaded client side (javascript). — Zachary, Feb 06 '12 at 18:07

Gabe · Answer 1 · 2012-02-05T17:59:41.060

0

Depending on what you're passing back to the client, I am going to assume it's a List<string>. You can adjust the code accordingly depending on what you're passing back to the client, since you're not telling us what is being passed back.

So if that is the case do something like this:

// first remove the current options if any
$('#ddlTeams').find('option').remove();

// next iterate thru your object adding each option to the drop down\    
$(jsonObj).each(function(index, item){
     $('#ddlTeams').append($('<option></option>').val(item).html(item));   
});

Assuming again, if your List has an object containing teamid and `teamname11

// first remove the current options if any
$('#ddlTeams').find('option').remove();

// next iterate thru your object adding each option to the drop down\    
$(jsonObj).each(function(index, item){
     $('#ddlTeams').append($('<option></option>').val(item.teamid).html(item.teamname));   
});

edited Feb 05 '12 at 17:59

answered Feb 05 '12 at 17:38

Gabe

49,577
28
142
181

Hi Gabe, I tried the code but it din work! it is an asp.net dropdown control in case u confused it to be a – jith10 Feb 05 '12 at 17:53
So me what the jsonObj is... is it `List` ? if so what is `T`. – Gabe Feb 05 '12 at 17:56
my json data is in the following order : "{"TeamList" : [{"teamid" : "3","teamname" : "Man United"}]}" – jith10 Feb 06 '12 at 16:58
Try to iterate over: `$(jsonObj.TeamList).each(function(index, item){` – Gabe Feb 06 '12 at 17:28

T I · Answer 2 · 2012-02-06T17:53:28.363

It is dependent on the data you are getting back from the server but this is what I came up with presuming it was a simple json structure, I was also wondering whether it may be better to send the data on the first request, and forget about the ajax.

$('#continent').change(function() {
    // success function
    $('#country').children().remove();
    for (var country in json.continents[$(this).val()]) {
        var $elm = $('<option>').attr('value', country)
                                .html(country);
        $('#country').append($elm);
    }
})

Here is a demo;

Edit: Given your data structure have update so something like this

var teams = json['TeamList'];

$('#teamid').change(function() {
    // success function
    var $t = $(this);
    var $select = $('#teamname');
    var i = (function() {
        for (var i=0; i<teams.length; i++) {
            if (teams[i]['teamid'] == $t.val()) {
                return i;
            }
        }
    })()
    var name = teams[i]['teamname'];
    var $elm = $('<option>').val(name).html(name);

    $select.children().remove();
    $select.append($elm);
})

see here for demo, please note this may requiring some changing to fit your specific use case, but it demonstrates simple iteration over arrays and objects

my json data is in the following order : "{"TeamList" : [{"teamid" : "3","teamname" : "Man United"}]}" — jith10, Feb 06 '12 at 16:44

How do i bind the json data to a asp.net dropdownlist using jquery?

2 Answers2

Linked