如何使用 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 结构而提出的，我还想知道在第一个请求时发送数据是否更好，而忘记了阿贾克斯。

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

这是一个演示；

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

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

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