How to unselect the dropdown list if its parents list gets unselected? MVC Jquery, Razor

Question

I want to achieve that parent list dropdown list gets to its initial state, say (--Select Category--) the the child dropdown should also unload and get disabled and show --Select Subcategory> until user selects the Category from parent table. Current output is but I want to achieve

View

    <div class="form-group">
                @Html.LabelFor(model => model.facultyId, "Faculty", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("facultyId", new SelectList(ViewBag.facultyList, "facultyId", "facultyName"), "--Select Faculty--", htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.facultyId, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.departmentId, "departmentId", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("departmentId", new SelectList(""), "--Select Department--", htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.departmentId, "", new { @class = "text-danger" })
                </div>
            </div>


//jQuery Function
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>

<script>
    $(document).ready(function () {
        $("#facultyId").change(function () {
            $.get("/StudentCtrl/GetDeptName", { facultyId: $("#facultyId").val() }, function (data) {
                $("#departmentId").empty(); //to remove old loaded items
                $.each(data, function (key, val) {
                    $("#departmentId").append("<option value='" + val.departmentId + "'>" + val.departmentName + "</option>");
                });
            });
        })
    })
</script>

Controller

 studentDBEntities db = new studentDBEntities();

        public ActionResult Create()
        {

            var facList = db.tbl_faculty.ToList();
            ViewBag.facultyList = facList;

            return View();
        }


        public JsonResult GetDeptName(int facultyId)
        {
            db.Configuration.ProxyCreationEnabled = false;
          
            List<tbl_Department> dep = db.tbl_Department.Where(x=>x.facultyId== facultyId).ToList();
            return Json(dep, JsonRequestBehavior.AllowGet);
        }

Please update your question and remove all of the code that's not relevant to your question. If you're asking for help with jquery, we don't need to see c# code. Or are you looking for a c# solution to the problem? Also, where's your attempt to solve this yourself ? That would help us see what approach you're looking for. — devlin carnate, Dec 17 '20 at 20:42
Yes I have updated. Thanks. I have created a method in jquery which passes result to json method in my controller. — EmmyAyes, Dec 17 '20 at 20:45
I tried many ways but I am new to mvc and jquery so I couldn't update it as expected — EmmyAyes, Dec 17 '20 at 20:51
This is the best way to unselect a dropdown. https://stackoverflow.com/questions/1857781/best-way-to-unselect-a-select-in-jquery Here's another way https://stackoverflow.com/questions/39245967/how-to-unselect-options-in-select-using-jquery You might able to use a line or two of the code from this page https://stackoverflow.com/questions/14260428/how-to-select-and-deselect-all-options-in-a-select-box Post the generated HTML and make a runnable snippet on stackoverflow.com — react_or_angluar, Dec 17 '20 at 23:25

score 1 · Accepted Answer · answered Dec 18 '20 at 02:01

Here is a demo:

view:

 <form>
        <div class="form-group">
            @Html.LabelFor(model => model.facultyId, "Faculty", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("facultyId", new SelectList(ViewBag.facultyList, "facultyId", "facultyName"), "--Select Faculty--", htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.facultyId, "", new { @class = "text-danger" })
            </div>
        </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.departmentId, "departmentId", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("departmentId", new SelectList(""), "--Select Department--", htmlAttributes: new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.departmentId, "", new { @class = "text-danger" })
                </div>
            </div>
    </form>
//jQuery Function

script:

<script>
        $(document).ready(function () {
            $("#facultyId").change(function () {
                $("#departmentId").empty(); //to remove old loaded items
                $("#departmentId").append("<option value=''>--Select Department--</option>");
                if ($("#facultyId").val()!= "") {
                    $.get("/StudentCtrl/GetDeptName", { facultyId: $("#facultyId").val() }, function (data) {

                        $.each(data, function (key, val) {
                            $("#departmentId").append("<option value='" + val.departmentId + "'>" + val.departmentName + "</option>");
                        });
                    });
                }
                
            })
        })
    </script>

Result(I use fake data to test):

How to unselect the dropdown list if its parents list gets unselected? MVC Jquery, Razor

1 Answers1