How do i submit form on dropdownlist index change in mvc

See more:

jQuery

MVC4

DropDownList

View:

@{
    ViewBag.Title = "Submissions";
    ViewBag.SubTitle = "Details";
    Layout = "~/Views/Shared/_HomeLayout.cshtml";

    List<SelectListItem> typeListItems = new List<SelectListItem>();
    typeListItems.Add(new SelectListItem
    {
        Text = "All Types",
        Value = "AllTypes",
        Selected = true
    });
    typeListItems.Add(new SelectListItem
    {
        Text = "Submissions",
        Value = "Submissions"
    });
    typeListItems.Add(new SelectListItem
    {
        Text = "Announcements",
        Value = "Announcements"
    });
    
    List<SelectListItem> deptListItems = ConfigurationHelper.Items(ConfigurationHelper.ListType.Departments).ToList();
    deptListItems.Add(new SelectListItem
    {
        Text = "All Departments",
        Value = "AllDepartments",
        Selected = true
    });
}


<pre><span class="headbarmenu" style="font-size:medium;">
        @Html.DropDownList("type", typeListItems, new { id="ddlType"})

        @Html.DropDownList("department", deptListItems, new { id = "ddlDept" })

        <button class="btn btn-sm printBtn hidden-print">Print</button>
    </span>

here is my controller action:

public JsonResult GetCalendarEvents(string start, string end)
        {
            DateTime startDate = DateTime.Parse(start);
            DateTime endDate = DateTime.Parse(end);

            var submissions = SubmissionRepository.LoadAllEventsInDateRange(UserProfile.UserId, startDate, endDate);

            var announcements = AnnouncementRepository.LoadAllEventsInDateRange(UserProfile.UserId, startDate, endDate);

            List<CalendarEventModel> eventsForDate = new List<CalendarEventModel>();
            if (submissions != null)
            {
                eventsForDate = submissions;
            }
            if (announcements != null)
            {
                eventsForDate.AddRange(announcements);
            }

            if (eventsForDate.Count > 0)
            {
                foreach (var rec in eventsForDate)
                {
                    rec.StatusColor = Enums.GetEnumDescription<CalendarEventStatus>(rec.StatusString);
                    string ColorCode = rec.StatusColor.Substring(0, rec.StatusColor.IndexOf(":"));
                    rec.ClassName = rec.StatusColor.Substring(rec.StatusColor.IndexOf(":") + 1, rec.StatusColor.Length - ColorCode.Length - 1);
                    rec.StatusColor = ColorCode;
                }
            }

            var eventList = from e in eventsForDate
                            select new
                            {
                                id = e.ID,
                                boType = e.BOType.ToString(),
                                title = e.Title,
                                start = e.StartDateString,
                                end = e.EndDateString,
                                color = e.StatusColor,
                                 className = e.ClassName,
                                // someKey = e.SomeImportantKeyID,
                                allDay = true
                            };
            var rows = eventList.ToArray();
            return Json(rows, JsonRequestBehavior.AllowGet);
        }

On index change of any dropdpwnlist.I should send the values of both dropdownlist values to the controller.

What I have tried:

$('#ddlType').change(function () {
var val1= $('#ddlType').val();
var val2 = $('#ddlDept').val();

What should i do now?
})