当用户为下拉列表选择值时强制提交，除非该值为“自定义”

Force submit when user selects a value for DropDownList unless the value is Custom

本文关键字：自定义 下拉列表 用户 选择 提交      更新时间：2023-09-26

我希望在用户为 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>
}

是的，它需要用jquery来完成。像这样：

$(document).ready(function(){
    $("#idofyourdropdown").change(function(){
       if($(this).val() == "Custom")
       {
        $("p.down").toggle();
       }
        else{
       $("form").submit();
    }
    });
});

并"向下"分类到您想要展示的<p>。

这是你要找的吗？

$('#specifiedRange').change(function() {
    if($(this).val() !== 'Custom') $(this).closest('form').submit();
})
相关文章：