使用 JSON 結果填充下拉列表 - 使用 MVC3、JQuery、Ajax、JSON 的級聯下拉列表

我有一個使用 mvc 的級聯下拉菜單。例如，如果您在第一個下拉列表中選擇一個國家，則應相應地填充第二個下拉列表中該國家的州。

目前，一切似乎都很好，我得到了 Json 響應（使用 F12 工具看到它），它看起來像 [{ "stateId":"01", "StateName": "arizona" } , { "stateId" : "02", "StateName":"California" }, etc..] ..

我想知道如何second-dropdown用這些數據填充我的。我的第二個下拉列表的 id 是“ StateID”。任何幫助將不勝感激。

下面是用於從伺服器生成 JSON 響應的程式碼：

[HttpPost]
public JsonResult GetStates(string CountryID)
{
   using (mdb)
   {
       var statesResults = from q in mdb.GetStates(CountryID)
                       select new Models.StatesDTO
                       {
                           StateID = q.StateID,
                           StateName = q.StateName
                       };

       locations.statesList = stateResults.ToList();
   }

   JsonResult result = new JsonResult();

   result.Data = locations.statesList;

   return result;
}

下面是客戶端 HTML、我的剃須刀程式碼和我的腳本。我想在“ success：”中編寫一些程式碼，以便dropdown使用 JSON 數據填充州。

<script type="text/javascript">
   $(function () {
       $("select#CountryID").change(function (evt) {

           if ($("select#CountryID").val() != "-1") {

               $.ajax({
                   url: "/Home/GetStates",
                   type: 'POST',
                   data: { CountryID: $("select#CountryID").val() },
                   success: function () { alert("Data retrieval successful"); },
                   error: function (xhr) { alert("Something seems Wrong"); }
               });
           }
       });
   });
</script> 

首先，在 jQuery 事件處理函式內部this是指觸發事件的元素，因此您可以將額外的呼叫替換$("select#CountryID")為$(this). 儘管在可能的情況下您應該直接訪問元素屬性，而不是使用 jQuery 函式，因此您可以簡單地使用this.value而不是$(this).val()or $("select#CountryID").val()。

然後，在您的 AJAX 呼叫success函式中，您需要創建一系列<option>元素。這可以使用基本jQuery()功能（或$()簡稱）來完成。看起來像這樣：

$.ajax({
   success: function(states) {
       // states is your JSON array
       var $select = $('#StateID');
       $.each(states, function(i, state) {
           $('<option>', {
               value: state.stateId
           }).html(state.StateName).appendTo($select);
       });
   }
});

這是一個jsFiddle 展示。

相關的 jQuery 文件：

• jQuery.each()
• jQuery()

引用自：https://stackoverflow.com/questions/14339089