在MVC中的“编辑”屏幕中只显示所需的DDL值

Display only required DDL value in Edit screen in MVC

本文关键字：显示 DDL 中的 MVC 编辑 屏幕      更新时间：2023-09-26

当我在MVC中的创建视图中使用下面的JS代码时，它非常有效。然而，我已经尝试过更改它，以便在编辑视图中，当从创建屏幕中选择"OtherSpecififyFormGroup"时，它仍然只显示文本框。任何帮助都会很棒！！

<script>
        $(document).ready(function () {
            //this line fires no matter what
            $("#OtherSpecifyFormGroup").hide();            
            $("#SelectType").change(function () {
                //alert("in function");
                var value = document.getElementById("SelectType").value;
                if (value == "4") {
                    $("#OtherSpecifyFormGroup").show("highlight", { color: "#7FAAFF" }, 1000);
                }
                else {
                    $("#OtherSpecifyFormGroup").hide();
                }
            });
        })
    </script>

HTML代码

<div class="form-group">
                    @Html.LabelFor(model => model.SelectType, "Select Type", new { @class = "control-label col-md-5" })
                    <div class="col-md-1">
                        @Html.DropDownList("SelectType", String.Empty)
                        @Html.ValidationMessageFor(model => model.SelectType)
                    </div>
                </div>
                <div class="form-group" id="OtherSpecifyFormGroup">
                    @Html.LabelFor(model => model.OtherSpecify, new { @class = "control-label col-md-5" })
                    <div class="col-md-4 sbchanged">
                        @Html.TextBoxFor(model => model.OtherSpecify)
                        @Html.ValidationMessageFor(model => model.OtherSpecify)
                    </div>
                </div>

通过反复使用JS代码，我终于让它工作起来了！

<script>
        $(document).ready(function () {
            if (document.getElementById("SelectType").value != "4") {
                $("#OtherSpecifyFormGroup").hide();
            }
            $("#SelectType").change(function () {
                //alert("in function");
                var value = document.getElementById("SelectType").value;
                if (value != "4") {
                    $("#OtherSpecifyFormGroup").hide();
                }
                else {
                    $("#OtherSpecifyFormGroup").show("highlight", { color: "#7FAAFF" }, 1000);
                }
            });
        })
    </script>

通过更改inital if语句，我可以隐藏任何不是"4"的值，这意味着如果用户在创建屏幕上选择任何其他值并进行编辑，"OtherSpecificFormGroup"将被隐藏。更改的第二部分中的显示和隐藏进行了交换，因此，如果在编辑视图中选择了"4"以外的任何值，则文本框将保持隐藏状态，但当选择"4"时，文本框将出现。

相关文章：