c#级联下拉列表未定义

本文关键字：未定义 下拉列表 级联 | 更新日期: 2023-09-27 18:06:31

我正在尝试创建一个级联下拉列表，基于在第一个下拉列表中选择的内容，但第二个列表一直未定义。

下面是我的视图的下拉列表:

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

为什么我在优先级下拉列表中得到未定义的每个优先级?

c#级联下拉列表未定义

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

您的操作方法返回字符串的列表。列表中的每个项(单个字符串对象)都没有Text或Value属性。但是您的客户端代码正在尝试访问这些。

你可以修改你的服务器方法来返回一个有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);
}

如果你正在从db表中读取优先级，在Value属性

中保留记录Id的字符串化版本是一个好主意

修改了上面的服务器代码后，您当前的客户端代码就可以工作了。

另一个选项是更新您的客户端代码以使用数组中的项(单个字符串)。

应该可以。

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

我还注意到你的代码中的另一个问题。从jQuery 1.7开始，jQuery live方法已弃用。您应该考虑使用on而不是live。

$(function(){
  $("select.dropdownSource").on("change", (function () {
  });
});
相关文章：