MVC 对不同的下拉列表选择执行不同的方法

Question

控制器

    [Authorize]
    public ActionResult Create()
    {
        var LeaveType = new SelectList(new[] 
        {
            new { ID = "0", Name = "" },
            new { ID = "1", Name = "Full day leave" },
            new { ID = "2", Name = "Half day AM leave" },
            new { ID = "3", Name = "Half day PM leave" },  
            new { ID = "4", Name = "Time off" }, 
        },
        "ID", "Name", 0);

        ViewData["LeaveType"] = LeaveType;
        return View();
    }

查看

<div class="form-group">
    <div class="col-md-4 col-md-offset-4">
        <label class="text-center">Leave Type</label>
        @Html.DropDownList("LeaveType", null, htmlAttributes: new { @class = "form-control" })
    </div>
</div>

脚本

$('#LeaveType').change(function () {
    var value = $(this).val();
        if (value == "0") {
            $('#EndDate').closest('.form-group').hide();
            $('#StartDate').closest('.form-group').hide();
            $('#datetimepicker6').closest('.form-group').hide();
            $('#datetimepicker7').closest('.form-group').hide();
            $('#leaveReason').closest('.form-group').hide();
            $('#createBtn').closest('.form-group').hide();
            $('#cancelBtn').closest('.form-group').hide();
        }
        else if (value == "1") {
            $('#EndDate').closest('.form-group').show();
            $('#StartDate').closest('.form-group').show();
            $('#datetimepicker6').closest('.form-group').hide();
            $('#datetimepicker7').closest('.form-group').hide();
            $('#leaveReason').closest('.form-group').show();
            $('#createBtn').closest('.form-group').show();
            $('#cancelBtn').closest('.form-group').show();
            @*@Html.ValueFor(CurrentApplication.)*@
        }
        else if (value == "2") {
            $('#EndDate').closest('.form-group').hide();
            $('#StartDate').closest('.form-group').show();
            $('#datetimepicker6').closest('.form-group').hide();
            $('#datetimepicker7').closest('.form-group').hide();
            $('#leaveReason').closest('.form-group').show();
            $('#createBtn').closest('.form-group').show();
            $('#cancelBtn').closest('.form-group').show();
        }
        else if (value == "3") {
            $('#EndDate').closest('.form-group').hide();
            $('#startDate').closest('.form-group').show();
            $('#datetimepicker6').closest('.form-group').hide();
            $('#datetimepicker7').closest('.form-group').hide();
            $('#leaveReason').closest('.form-group').show();
            $('#createBtn').closest('.form-group').show();
            $('#cancelBtn').closest('.form-group').show();
        }
        else {
            $('#EndDate').closest('.form-group').hide();
            $('#StartDate').closest('.form-group').hide();
            $('#datetimepicker6').closest('.form-group').show();
            $('#datetimepicker7').closest('.form-group').show();
            $('#leaveReason').closest('.form-group').show();
            $('#createBtn').closest('.form-group').show();
            $('#cancelBtn').closest('.form-group').show();
        }
    });

我的 LeaveType 是一个下拉列表，用户可以在其中 select 他们想申请什么样的休假（例如 Full day/half day/time off）。当它们 select 下拉列表中的值时，我想隐藏或显示某些元素，因为根据休假类型可能不需要某些元素。

我有一个 startDate 和 endDate 文本框，对于半天，我不会显示 endDate 文本框，但我想将 endDate 设置为与 startDate 相同，如果用户 select 是半天 selection 来自下拉列表。我猜我应该有一个 if else 循环，我知道如何编写代码，但我不知道把它放在哪里。

此外，当我在 table 中显示数据时，我的下拉列表值显示为 ID。如何改为显示 LeaveType 的名称？感谢所有帮助 ^^ 谢谢！

Answer 1

您可以使用 #StartDate 的 change 事件来完成，如下所示。希望对您有所帮助。

$('#StartDate').change(function() {
     var endDate = $('#EndDate');
     if ($('#LeaveType').val()==2) {
         endDate.val($(this).val());
     }
 });

MVC 对不同的下拉列表选择执行不同的方法

MVC Perform different methods for different dropdownlist selections

javascript

c#

asp.net-mvc

html.dropdownlistfor