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

时间:2015-03-06 09:54:58

标签: javascript asp.net-mvc

当我在MVC的create view中使用下面的JS代码时,它的工作非常完美。但是我试图改变它,以便在编辑视图中,当从创建屏幕中选择“OtherSpecifyFormGroup”时,它仍然只显示文本框。任何帮助都会很棒!!

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

1 个答案:

答案 0 :(得分:0)

通过使用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”的值,这意味着如果用户在创建屏幕上选择任何其他值并进入编辑,则隐藏“OtherSpecifyFormGroup”。变换的第二部分中的显示和隐藏被交换,因此如果在编辑视图中选择了除“4”以外的任何值,则文本框保持隐藏状态但是当选择“4”时它会出现。