我曾在具有相同模型值的其他应用程序中工作,但是这次我遇到了一个问题。

我要实现的是,当我在一个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");


我的视图是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>
    ....


有没有一种方法可以使第一个SelectList中的值是Monthly,则显示MonthList的值,反之亦然,以便当第一个框更改时,第二个框也更改?

我能够在其他应用程序中解决此问题,但它非常麻烦,并且依赖于两个SelectList访问相同模型属性。我认为必须有一种更好的方法来做到这一点。

最佳答案

通过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();
        }
    }
});

09-10 10:29
查看更多