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

          });

      });


  });

Answer 1

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

Answer 2

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