Populate a DropDownList in Change of Another DropDownList

In this example, we populate two DropDownLists. One for Department List and another for Designation List. The Department list is first executed. Then, on the basis of the selected department name, the designation list is populated.

For this, first we need to create two model classes for Department and Designation as below:

public class DeptMas
    {
        public int DEPTCODE { get; set; }
        public string DEPTDESC { get; set; }
    }

public class DesigMas
    {
        public int DESIGCODE { get; set; }
         public string DESIGDESC { get; set; }
        public int DEPTCODE { get; set; }
    }

Now to create the Controller. For that we first create the following method to populate the department list: 

         public ActionResult GetDept()
        {
            List<DeptMas> lstDept = new List<DeptMas>();
            DeptMas objDept;
            objDept = new DeptMas();
            objDept.DEPTCODE = 1;
            objDept.DEPTDESC = "Accounts";
            lstDept.Add(objDept);
            objDept = new DeptMas();
            objDept.DEPTCODE = 2;
            objDept.DEPTDESC = "Administrator";
            lstDept.Add(objDept);
            objDept = new DeptMas();
            objDept.DEPTCODE = 3;
            objDept.DEPTDESC = "Sales";
            lstDept.Add(objDept);
            objDept = new DeptMas();
            objDept.DEPTCODE = 4;
            objDept.DEPTDESC = "Marketing";
            lstDept.Add(objDept);
            return Json(lstDept, JsonRequestBehavior.AllowGet);
        }

Now we want to write the method to populate the designation. This method will take DeptCode as argument and provide only those designation lists tagged with the given department.

 

public ActionResult GetDesig(int DeptCode)
        {
            List<DesigMas> lstDesig = PopulateDesignation().Where(s => s.DEPTCODE.Equals(DeptCode)).ToList();
            return Json(lstDesig, JsonRequestBehavior.AllowGet);
        }

        public List<DesigMas> PopulateDesignation()
        {
            List<DesigMas> lstDesig = new List<DesigMas>();
            DesigMas objDesig;
            objDesig = new DesigMas();
            objDesig.DESIGCODE = 1;
            objDesig.DESIGDESC = "Accountants";
            objDesig.DEPTCODE = 1;
            lstDesig.Add(objDesig);

            objDesig = new DesigMas();
            objDesig.DESIGCODE = 2;
            objDesig.DESIGDESC = "Sr Accountant";
            objDesig.DEPTCODE = 1;
            lstDesig.Add(objDesig);

            objDesig = new DesigMas();
            objDesig.DESIGCODE = 3;
            objDesig.DESIGDESC = "Sales Man";
            objDesig.DEPTCODE = 3;
            lstDesig.Add(objDesig);

            objDesig = new DesigMas();
            objDesig.DESIGCODE = 4;
            objDesig.DESIGDESC = "Manager";
            objDesig.DEPTCODE = 4;
            lstDesig.Add(objDesig);

            objDesig = new DesigMas();
            objDesig.DESIGCODE = 5;
            objDesig.DESIGDESC = "Agent";
            objDesig.DEPTCODE = 4;
            lstDesig.Add(objDesig);

            return lstDesig;
        }

Now to design the view. For the view, please use the following code: 

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: '@Url.Action("GetDept", "Employee")',
            type: "GET",
            success: function (json, textStatus) {
                json = json || {};
                for (var i = 0; i < json.length; i++) {
                    $("#ddlDept").append('<option value="' + json[i].DEPTCODE + '">' + json[i].DEPTDESC + '</option>');
                }
            },
            error: function () {
                alert("Data Not Found");
            }
        });
    });

    $(document).ready(function () {
        $("#ddlDesig").prop("disabled", true);
        $("#ddlDept").change(function () {
            var id = $("#ddlDept").val();
            $.ajax({
                cache: false,
                type: "GET",
                url: '@Url.Action("GetDesig", "Employee")',
                data: { "DeptCode": id },
                success: function (json, textStatus) {
                    $("#ddlDesig").empty();
                    json = json || {};
                    for (var i = 0; i < json.length; i++) {
                        $("#ddlDesig").append('<option value="' + json[i].DESIGCODE + '">' + json[i].DESIGDESC + '</option>');
                    }
                    $("#ddlDesig").prop("disabled", false);
                },
                error: function () {
                    alert("Data Not Found");
                }
        });
        });
    });

    function fnSubmit() {
        var msg = "Dept Code : " + $("#ddlDept").val() + " Dept Name : " + $("#ddlDept option:selected").text() + "</br>";
        msg += "Desig Code : " + $("#ddlDesig").val() + " Desig Name : " + $("#ddlDesig option:selected").text();
        alert(msg);
    }
</script>
<h4>Drop Down Control</h4>
<table>
    <tr>
        <td style="width:15%;" class="alignRight">
            <span class="menuItemBold">Select Department</span>
        </td>
        <td style="width:35%;">
            <select id="ddlDept"></select>
        </td>
        <td style="width:15%;" class="alignRight">
            <span class="menuItemBold">Select Designation</span>
        </td>
        <td style="width:35%;">
            <select id="ddlDesig"></select>
        </td>
    </tr>
    <tr>
        <td>
            <input type="submit" id="btnSubmit" value="Submit"  onclick="fnSubmit();"/>
        </td>
    </tr>
</table>