MVC Perform different methods for different dropdownlist selections

Question

Controller

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

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>

Script

$('#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();
        }
    });

My LeaveType is a drop down list where users can select what kind of leave they want to apply for (eg. Full day/half day/time off). When they select the value on the drop down list, i want to hide or show certain elements because some may not be required based on the type of leave.

I have a startDate and endDate textbox and for half day, i won't show the endDate textbox but i want to set the endDate to be the same as startDate if the user selects the halfday selection from the dropdownlist. I'm guessing I should have a if else loop and I know how to write the codes but I have no idea where to put it.

Also, when i display the data in a table, my drop down list values are display as the ID. How do I display the Name of the LeaveType instead? All help appreciated ^^ Thanks!

Answer 1

You can do it using the change event of #StartDate like following. Hope this will help you.

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