Question

我有一个国家的HTML下拉列表。现在我想使用ajax

相应地填充City下拉列表

<select class="form-control" id="ddCountry" runat="server" tabindex="8"></select>

<select class="form-control" id="ddCity" runat="server" tabindex="9"></select>

<script type="text/javascript">
        $('#ddCountry').on('change', function () {

            var storeData = { countryId: this.value }

            $.ajax({
                type: "POST",
                url: "UserRegistration.aspx/GetCities",
                data: JSON.stringify(storeData),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    alert("The data in list is "+data);
                },
                error: error
            });
        });
    </script>

我在.cs页面上的方法如下：

[WebMethod]
        public static List<CityBO> GetCities(string countryId)
        {
             //returning cities
        }

问题是我能够在GetCities方法中获取数据但是无法在ddCity列表中显示它，因为它是一个HTML控件而且方法是静态的，所以

ddCity.Items.AddRange(list_of_countries)无效，因为静态方法无法识别ddCity。请告诉我们如何填写下拉列表。

Answer 1

您无法以静态方法访问控件。你需要从webmethod返回城市列表并使用javascript填充下拉列表。在ajax的成功方法中写这样的代码。

success: function (data) {
    fillDropDown(data.d);
}

function fillDropDown(data){
    var html = "";
    for (var i = 0; i < data.length; i++)
    {
          html += "<option value='" + data[i].ValueField+ "'>" + 
                   data[i].TextField+ "</option>";
    }
     $("select[id$=ddlCity]").html(html);
}

Answer 2

您可以使用下面给出的ajax成功函数。

success: function (data) 
{
 var lankanListArray = JSON.parse(data.d);
 // running a loop
 $.each(lankanListArray, function (index, value) 
 {
  $("#ddlCity").append($("<option></option>").val(this.name).html(this.value));              
 });
}

在Asp.net HTML控件中动态获取城市

2 个答案: