一旦用户为 DropDownList 选择了一个值,只要它不是“自定义”,我就会强制提交。如果是“自定义”,我不希望提交表单。相反,我希望显示起始日期和结束日期。但是,除非选择自定义,否则我不希望显示起始日期或结束日期。我认为这必须使用 jQuery 或 JavaScript 来完成。谁能告诉我如何实现这一目标?
这是我在控制器中的代码,用于将下拉列表的开始日期、结束日期和列表传递给视图:
List<SelectListItem> rangeList = new List<SelectListItem>();
rangeList.Add(new SelectListItem { Text = "Today", Value = "Today" });
rangeList.Add(new SelectListItem { Text = "Yesterday", Value = "Yesterday" });
rangeList.Add(new SelectListItem { Text = "Past 7 Days", Value = "Past 7 Days" });
rangeList.Add(new SelectListItem { Text = "Past 30 Days", Value = "Past 30 Days" });
rangeList.Add(new SelectListItem { Text = "Last Month", Value = "Last Month" });
rangeList.Add(new SelectListItem { Text = "Custom", Value = "Custom" });
ViewBag.rangeList = rangeList;
ViewBag.startingDate = startingDate;
ViewBag.endingDate = endingDate;
ViewBag.specifiedRange = specifiedRange;
编辑
我修改了我的代码以显示添加脚本的尝试。下面是我现在在视图中的代码。它什么也没做。
<script type="text/javascript">
$("#range").change(function ()
{
if ($(this).val() == "Custom")
{
$("p.down").toggle();
}
else
{
$("form").submit();
}
});
</script>
@using (Html.BeginForm())
{
<p>
@Html.DropDownList("specifiedRange", new SelectList(
ViewBag.rangeList as System.Collections.IEnumerable,
"Text",
"Value",
new { @Id = "range" }))
</p>
<p class = "down">
Starting Date: @(Html.Telerik().DateTimePicker().Name("startingDate"))
Ending Date: @(Html.Telerik().DateTimePicker().Name("endingDate"))
<input type="submit" value="GO" />
</p>
}