我如何使用jQuery将json数据绑定到asp.net dropdownlist? [英] How do i bind the json data to a asp.net dropdownlist using jquery?

问题描述

我正在尝试设计一个级联的下拉菜单.我正在使用3 asp.net下拉菜单.页面上的第一个加载会加载国家/地区.然后，当选择了一个国家，我做一个WebMethod一个Ajax调用.我获取了属于那个国家的球队的数据.数据在数据集中，我将其转换为JSON，然后将其返回.成功后，我需要添加什么代码以将json数据绑定到下拉列表. 下面是代码.

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

          });

      });


  });

推荐答案

这取决于您从服务器获取的数据，但这是我想出的，假设它是一个简单的json结构，我也想知道最好是在第一个请求上发送数据，然后忘记ajax.

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

这是演示;

编辑:鉴于您的数据结构已更新，因此类似

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

这篇关于我如何使用jQuery将json数据绑定到asp.net dropdownlist?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！