Javascript 如何在ASP.Net核心MVC中创建级联选择列表

我在不同的应用程序中使用相同的模型值，但这次遇到了一个问题

我想要实现的是，当我在一个

SelectList

中选择一个值时，另一个值中的值会发生变化。这目前不起作用

假设我有以下模型：

public class DashboardChartsByMonthModel
{
    ...
    public SelectList TimeSliceList { get; set; }
    public TimeSlice TimeSliceVal { get; set; } // Timeslice is an Enum containing "ByMonth" and "ByQuarter"
    public SelectList StartQuarterList { get; set; }
    public string StartQuarter { get; set; }
    public SelectList StartMonthList { get; set; }
    public string StartMonth { get; set; }
    public SelectList StartYearList { get; set; }
    public string StartYear { get; set; }
    ....
    public void SetDefaults()
    {
        ...
        TimeSliceList = new SelectList(new List<SelectListItem>
        {
            new SelectListItem {Selected = true, Text = "Monthly", Value = TimeSlice.ByMonth.ToString()},
            new SelectListItem {Selected = false, Text = "Quarterly", Value = TimeSlice.ByQuarter.ToString()}
        }, "Value", "Text");
}
        StartQuarterList = new SelectList(new List<SelectListItem>
        {
            new SelectListItem {Selected = true, Text = "Q1", Value = "1"},
            new SelectListItem {Selected = false, Text = "Q2", Value = "4"},
            new SelectListItem {Selected = false, Text = "Q3", Value = "7"},
            new SelectListItem {Selected = false, Text = "Q4", Value = "10"}
        }, "Value", "Text");

        StartMonthList = new SelectList(new List<SelectListItem>
        {
            new SelectListItem {Selected = true, Text = "January", Value = "1"},
            new SelectListItem {Selected = false, Text = "February", Value = "2"},
            new SelectListItem {Selected = false, Text = "March", Value = "3"},
            new SelectListItem {Selected = false, Text = "April", Value = "4"},
            new SelectListItem {Selected = false, Text = "May", Value = "5"},
            new SelectListItem {Selected = false, Text = "June", Value = "6"},
            new SelectListItem {Selected = false, Text = "July", Value = "7"},
            new SelectListItem {Selected = false, Text = "August", Value = "8"},
            new SelectListItem {Selected = false, Text = "September", Value = "9"},
            new SelectListItem {Selected = false, Text = "October", Value = "10"},
            new SelectListItem {Selected = false, Text = "November", Value = "11"},
            new SelectListItem {Selected = false, Text = "December", Value = "12"}
        }, "Value", "Text");

        StartYearList = new SelectList(new List<SelectListItem>
        {
            new SelectListItem {Selected = false, Text = "2016", Value = "2016"},
            new SelectListItem {Selected = true, Text = "2017", Value = "2017"}
        }, "Value", "Text");

公共类仪表板ChartsByMonthModel
{
...
public SelectList TimeSliceList{get；set；}
公共时间片TimeSliceVal{get；set；}//TimeSlice是一个包含“ByMonth”和“ByQuarter”的枚举
public SelectList startguartlist{get；set；}
公共字符串StartQuarter{get；set；}
public SelectList StartMonthList{get；set；}
公共字符串StartMonth{get；set；}
public SelectList StartYearList{get；set；}
公共字符串StartYear{get；set；}
....
公共void SetDefaults（）
{
...
TimeSliceList=新建SelectList（新建列表
{
新建SelectListItem{Selected=true，Text=“Monthly”，Value=TimeSlice.ByMonth.ToString（），
新建SelectListItem{Selected=false，Text=“Quarterly”，Value=TimeSlice.ByQuarter.ToString（）}
}“价值”、“文本”）；
}
StartQuartList=新建选择列表（新建列表
{
新建SelectListItem{Selected=true，Text=“Q1”，Value=“1”}，
新建SelectListItem{Selected=false，Text=“Q2”，Value=“4”}，
新建SelectListItem{Selected=false，Text=“Q3”，Value=“7”}，
新建SelectListItem{Selected=false，Text=“Q4”，Value=“10”}
}“价值”、“文本”）；
StartMonthList=新建选择列表（新建列表
{
新建SelectListItem{Selected=true，Text=“一月”，Value=“1”}，
新建SelectListItem{Selected=false，Text=“二月”，Value=“2”}，
新建SelectListItem{Selected=false，Text=“March”，Value=“3”}，
新建SelectListItem{Selected=false，Text=“April”，Value=“4”}，
新建SelectListItem{Selected=false，Text=“May”，Value=“5”}，
新建SelectListItem{Selected=false，Text=“June”，Value=“6”}，
新建SelectListItem{Selected=false，Text=“July”，Value=“7”}，
新建SelectListItem{Selected=false，Text=“August”，Value=“8”}，
新建SelectListItem{Selected=false，Text=“septer”，Value=“9”}，
新建SelectListItem{Selected=false，Text=“十月”，Value=“10”}，
新建SelectListItem{Selected=false，Text=“11”，Value=“11”}，
新建SelectListItem{Selected=false，Text=“December”，Value=“12”}
}“价值”、“文本”）；
StartYearList=新建选择列表（新建列表
{
新建SelectListItem{Selected=false，Text=“2016”，Value=“2016”}，
新建SelectListItem{Selected=true，Text=“2017”，Value=“2017”}
}“价值”、“文本”）；

而我的视图，一个Razor（.cshtml）页面，具有以下内容：

<body>
    ....
    <form method="post">
            <h3>By Month or Quarter</h3>
            <select id="TimeSlice" name="TimeSlice" asp-for="TimeSliceVal" asp-items="@Model.TimeSliceList"></select>
            Start:<select id="StartMonth" name="StartMonth" asp-for="StartMonth" asp-items="@Model.StartMonthList"></select>
            <select id="StartYear" name="StartYear" asp-for="StartYear" asp-items="@Model.StartYearList"></select>
    ....

....
按月或按季度
开始：
....

是否有一种方法可以使它在第一个选择列表中的值为每月时显示月列表中的值，反之亦然，这样当第一个框更改时，第二个框也会更改

---

我能够在我的一个其他应用程序中解决这个问题，但它非常麻烦，并且依赖于两个选择列表访问相同的模型属性。我想应该有更好的方法来实现这一点。

通过javascript实现这一点应该非常简单。我的方法将使用JQuery，如果您不使用JQuery，则有资源ces可帮助您将其转换为本机javascript代码

$(document).ready(function() {
    $("#TimeSlice").on("change", function() {
        var selectedValue = $(this).val();
        if(val === "Whatever the value of Monthly is here")
        {
            $("#StartMonth").show();
            $("#StartYear").hide();
        }
        else if(val === "Whatever the value of Quarterly is here"){     
            $("#StartYear").show();
            $("#StartMonth").hide();
        }else{
            //If you have any other options in the dropdown, such as a default value or placeholder, this will hide both quarterly and monthly
            $("#StartYear").hide();
            $("#StartMonth").hide();
        }
    }
});

---

通过javascript实现这一点应该非常简单。我的方法将使用JQuery，如果您不使用JQuery，那么可以使用资源帮助您将其转换为本机javascript代码

$(document).ready(function() {
    $("#TimeSlice").on("change", function() {
        var selectedValue = $(this).val();
        if(val === "Whatever the value of Monthly is here")
        {
            $("#StartMonth").show();
            $("#StartYear").hide();
        }
        else if(val === "Whatever the value of Quarterly is here"){     
            $("#StartYear").show();
            $("#StartMonth").hide();
        }else{
            //If you have any other options in the dropdown, such as a default value or placeholder, this will hide both quarterly and monthly
            $("#StartYear").hide();
            $("#StartMonth").hide();
        }
    }
});

---

这样做并不复杂，只需首先呈现第一个下拉列表，并监听该下拉列表的更改事件，读取值，然后使用选定值向服务器进行ajax调用，服务器将返回SelectListItems的适当列表以呈现第二个下拉列表

public class DashboardChartsByMonthModel
{
   public List<SelectListItem> TimeSliceList { set;get;}
   public int SelectedTimeSlice { set;get;}

   public List<SelectListItem> TimeOptions{ set;get;}
   public int SelectedTimeOption { set;get;}    
}

公共类仪表板ChartsByMonthModel
{
公共列表时间片列表{set；get；}
public int SelectedTimeSlice{set；get；}
公共列表时间选项{set；get；}
public int SelectedTimeOption{set；get；}
}

在GET操作中，加载第一个下拉列表数据

public IActionResult Create()
{
  var vm= new DashboardChartsByMonthModel();
  vm.TimeSliceList = new List<SelectListItem>
  {
        new SelectListItem {Selected = true, Text = "Monthly",
                                             Value = TimeSlice.ByMonth.ToString()},
        new SelectListItem {Selected = false, Text = "Quarterly",
                                              Value = TimeSlice.ByQuarter.ToString()}
  };
  return View(vm);
}

public IActionResult Create（）
{
var vm=新的仪表板图表ByMonthModel（）；
vm.TimeSliceList=新列表
{
新建SelectListItem{Selected=true，Text=“Monthly”，
Value=TimeSlice.ByMonth.ToString（）}，
新建SelectListItem{Selected=false，Text=“季刊”，
Value=TimeSlice.ByQuarter.ToString（）}
};
返回视图（vm）；
}

在视图中，使用“选择标记”辅助对象

@model DashboardChartsByMonthModel
<form asp-action="Create" asp-controller="Home" method="post">    
    <select asp-for="SelectedTimeSlice" asp-items="@Model.TimeSliceList"></select>
    <select id="SelectedTimeOption" name="SelectedTimeOption" 
                                    data-url="@Url.Action("GetTimes")"></select>
    <input type="submit" />
</form>

@model仪表板图表ByMonthmodel

使用jQuery处理更改事件的javascript非常简单

$(function () {

    $("#SelectedTimeSlice").change(function() {
        var v = $(this).val();
        var url = $("#SelectedTimeOption").data("url") + '?value=' + v;
        $.getJSON(url,function(data) {
                $("#SelectedTimeOption").empty();
                $.each(data,
                    function(i, item) {
                        $("#SelectedTimeOption")
                     .append($("<option>").text(item.text).val(item.value));
                    });
            });
    });

});

$（函数（）{
$（“#SelectedTimeSlice”）.change（函数（）{
var v=$（this.val（）；
var url=$（“#SelectedTimeOption”）.data（“url”）+'？value='+v；
$.getJSON（url、函数（数据）{
$（“#SelectedTimeOption”）.empty（）；
美元。每个（数据，
职能（一、项目）{
$（“#选择的时间选项”）
.append（$（“”）.text（item.text）.val（item.value））；
});
});
});
});

这要求您有一个操作方法，该方法接受第一个下拉列表的所选选项值，并返回第二个下拉列表所需的选项

public IActionResult GetTimes(string value)
{
    if (value == TimeSlice.ByMonth.ToString())
    {
        var l = new List<SelectListItem>
        {
            new SelectListItem {Selected = true, Text = "January", Value = "1"},
            new SelectListItem {Selected = false, Text = "February", Value = "2"}
        };
        return Json(l);
    }
    var t2 = new List<SelectListItem>
    {
        new SelectListItem {Selected = true, Text = "Q1", Value = "1"},
        new SelectListItem {Selected = false, Text = "Q2", Value = "2"}
    };
    return Json(t2);
}

public IActionResult GetTimes（字符串值）
{
if（value==TimeSlice.ByMonth.ToString（））
{
var l=新的Li