我曾在具有相同模型值的其他应用程序中工作,但是这次我遇到了一个问题。
我要实现的是,当我在一个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();
}
}
});