C＃級聯DropDownList獲取未定義

Question

我想創建一個級聯下拉列表基於第一個下拉列表中選擇的內容，但第二個列表不斷得到未定義。

這裏是我的查看下拉菜單：

 <td align="left"> 
      @Html.DropDownList("goals", ViewData["goals"] as SelectList, new { @class = "dropdownSource" }) 
      @Html.HiddenFor(model => model.budgetList[i].align_to_district_goal) 
     <td align="left"> 
      @Html.DropDownList("priorities", new SelectList(string.Empty,"Value", "Text") , new { @class = "clsColumnNames" }) 
      @Html.HiddenFor(model => model.budgetList[i].align_to_district_priority) 
     </td> 

這裏是我的腳本：

<script> 
    $("select.dropdownSource").live("change", (function() { 
     $("#priorities").empty(); 

     var columnSelectBox = $(this).parent("td").next("td").find("select.clsColumnNames"); 

     $.ajax({ 
      type: 'POST', 
      url: '/PrepareBudget/GetPriorities', 
      dataType: 'json', 
      data: { goals: $(this).find("option:selected").text() }, 
      success: function (str) { 

       $.each(str, function (Value, Text) { 
        $("#priorities").append('<option value ="' + Text.Value + '">' + Text.Text + '</option>'); 
        debugger; 
       }); 
      }, 
      error: function (ex) { 
       alert('Failed to retrieve columns.' + ex); 
      } 
     }); 
     return false; 
    })); 
</script> 

這裏是我的控制器：

public JsonResult GetPriorities(string goals) 
{ 
    List<string> priorities = new List<string>(); 

    switch (goals) 
    { 
     case "Goal 1: Strengthen Early Literacy": 
      priorities.Add("Priority 1: Increase access to high-quality PreK classrooms and monitor quality"); 
      priorities.Add("Priority 2: Attract and retain strong teachers in early grades"); 
      priorities.Add("Priority 3: Execute a comprehensive District-wide literacy plan"); 
      priorities.Add("Priority 4: Leverage family and community partners to increase early literacy efforts"); 
      break; 
     case "Goal 2: Improve Post-Secondary Readiness": 
      priorities.Add("Priority 1: Improve student engagement through access to rigorous prep courses and personalized learning opportunities"); 
      break; 
     case "Goal 3: Develop Teachers, Leaders, and Central Office to Drive Student Success": 
      priorities.Add("Priority 1: Develop leadership pathways for teachers, coaches and school administrators"); 
      priorities.Add("Priority 2: Create competitive compensation systems to attract and retain classroom and school leaders"); 
      priorities.Add("Priority 3: Ensure high-quality feedback and evaluation of all staff connected to career development opportunities"); 
      priorities.Add("Priority 4: Use data deep dives in schools and District offices to drive continuous improvement"); 
      break; 
     case "Goal 4: Expand High-Quality School Options": 
      priorities.Add("Priority 1: Implement a common School Performance Framework to communicate school quality"); 
      priorities.Add("Priority 2: Transition to a student-based funding model"); 
      priorities.Add("Priority 3: Establish new school models that focus on different career training and specialized learning"); 
      priorities.Add("Priority 4: Commit to a compact with our charter schools"); 
      break; 
     case "Goal 5: Mobilize Family and Community Partners": 
      priorities.Add("Priority 1: Improve how we deliver information to parents through multiple communication avenues"); 
      priorities.Add("Priority 2: Provide ongoing diversity and customer service training to all staff and hold them accountable for service quality"); 
      priorities.Add("Priority 3: Establish a volunteer hub to connect partners to the District's student mission"); 
      break; 
    } 
    return Json(priorities); 
} 

爲什麼我收到未定義優先級下拉菜單中的每個優先級？

Answer 1

//... 
success: function (str) { 
       $.each(str, function (index, text) { 
        $("#priorities").append('<option value ="' + index + '">' + text + '</option>'); 
       }); 
      }, 
///... 

Answer 2

你的行動方法返回的字符串的列表。列表中的每個項目（單個字符串對象）沒有Text或Value屬性。但是你的客戶端代碼正試圖訪問這些代碼。

您可以更改您的服務器方法以返回具有文本和值屬性的SelectListItem列表。

public JsonResult GetPriorities(string goals) 
{ 
    List<SelectListItem> priorities = new List<SelectListItem>(); 
    // to do : Replace the below hard coded items with the real items you want 
    priorities.Add(new SelectListItem { Value="Priority 1", 
    Text="Priority1: Increase access to high-quality PreK classrooms and monitor quality"}); 

    return Json(priorities); 
} 

如果你正在閱讀從一個數據庫表中的優先級，這是一個好主意，讓記錄的ID的字符串化版本的Value財產

通過以上的服務器代碼的變化，你當前的客戶端代碼將會工作。

另一個選項是更新您的客戶端代碼使用項目（單串）數組中，因爲它是。

這應該工作。

success: function (itemsArray) { 
$.each(itemsArray, function (index, p) { 

    $("#priorities").append('<option value ="' + p+ '">' + p+ '</option>'); 

}); 

我也注意到你的代碼中的另一個問題。從jQuery 1.7開始，jQuery live方法是deprecated。你應該考慮使用on而不是直播。

$(function(){ 

    $("select.dropdownSource").on("change", (function() { 

    }); 

});