如果未选择其父列表，如何取消选择下拉列表？ MVC Jquery、剃刀

Question

我想实现父列表下拉列表达到其初始状态，比如 (--Select 类别--) 子下拉列表也应该卸载并被禁用并显示 --Select 子类别> 直到用户从父类别中选择类别 table。当前输出为 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);
        }

Answer 1

这是一个演示：

查看：

 <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>
        $(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>

结果（我用假数据测试）：

如果未选择其父列表，如何取消选择下拉列表？ MVC Jquery、剃刀

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

model-view-controller

jquery

visual-studio

razor

asp.net-core