如何使用 jquery 将 json 数据绑定到 asp.net 下拉列表？

Question

我正在尝试设计一个级联下拉菜单。我正在使用 3 asp.net 下拉菜单。页面加载的第一个加载国家/地区。然后选择一个国家时，我会对WebMethod进行AJAX调用。我为属于该国家/地区的团队获取数据。数据位于数据集中，我将其转换为 JSON，然后返回。成功后，我需要添加什么代码才能将 json 数据绑定到下拉列表。 下面是代码。

$(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

根据您传回给客户的内容，我将假设它是List<string>。您可以根据要传回给客户端的内容相应地调整代码，因为您没有告诉我们要传回的内容。

如果是这种情况，请执行以下操作：

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

再次假设，如果您的 List 有一个包含 teamid 和 `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

这取决于您从服务器返回的数据，但这是我想出的假设它是一个简单的 json 结构，我还想知道在第一次请求时发送数据是否更好，忘记 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);
    }
})

这是demo；

编辑：鉴于您的数据结构已经更新，所以像这样

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

请参阅此处查看demo，请注意这可能需要进行一些更改以适合您的特定用例，但它演示了对数组和对象的简单迭代