Question

我正在尝试设计级联下拉列表。我正在使用3个asp.net下拉菜单。页面加载中的第一个加载国家/地区。然后，当选择一个国家/地区时，我会对web方法进行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，请注意这可能需要进行一些更改以适合您的特定用例，但它演示了对数组和对象的简单迭代

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

2 个答案: