2015-01-21 45 views
2

我有一個國家的HTML下拉列表。現在我想填充相應的城市下拉用ajax在Asp.net HTML控件中動態獲取城市

<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在靜態方法中未被識別。請告訴如何填寫下拉列表。

+0

你需要在你的jQuery成功函數裏綁定來自getcities的數據,而不是在web方法中。 Web方法是靜態的,你不能在靜態上下文中訪問表單控件 – qamar 2015-01-21 04:16:06

+0

先生你能告訴這個成功函數 – Aman 2015-01-21 04:18:44

回答

2

您無法以靜態方法訪問控件。您需要從webmethod返回城市列表,並使用javascript填充下拉列表。在ajax的成功方法中,編寫這樣的代碼。

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

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

謝謝先生,但你能給我代碼如何使用JavaScript來填充它 – Aman 2015-01-21 04:17:45

1

您可以使用下面給出的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));    
}); 
}