Javascript 从MVC中的下拉列表中选择值时，显示文本框

当从DDL中选择“Other”时，我只希望文本框出现。但是，在调用之前，它总是显示而不是隐藏

我的看法是：

<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", null, new { @id = "Other" })
    @Html.TextBoxFor(model => model.OtherSpecify, new { @id = "OtherSpecify" })
    @Html.ValidationMessageFor(model => model.SelectType)
</div>

@LabelFor（model=>model.SelectType，“SelectType”，新的{@class=“controllabel col-md-5”}）
@DropDownList（“SelectType”，null，new{@id=“Other”}）
@Html.TextBoxFor（model=>model.OtherSpecify，新的{@id=“OtherSpecify”}）
@Html.ValidationMessageFor（model=>model.SelectType）

我尝试了以下两个JavaScript代码，但没有成功

<script>
    document.addEventListener("DOMContentLoaded", function () {
        $("SelectType").trigger("change");
    })
    $("#SelectType").on("change", function () {
        if ($("#SelectType option:selected").val() == 3) {
            $("#OtherSpecify").hide();
        } else {
            $("#OtherSpecify").show();
        }
    });
</script>   

<script>
    document.addEventListener("DOMContentLoaded", function () { $("SelectType").trigger("change");
    })
    $(function () {
        $('.OtherSpecify').show();

        $("Other").change(function () {
            if ($(this).is(":selected")) {
                $(this).parent().next().hide();
            }
            else {
                $(this).parent().next().show();
            }
        });
    })
</script>

document.addEventListener（“DOMContentLoaded”，函数（）{
$（“选择类型”）。触发器（“更改”）；
})
$（“#选择类型”）。在（“更改”上，函数（）{
if（$（“#SelectType选项：选中”）.val（）==3）{
$（“#其他指定”）.hide（）；
}否则{
$（“#其他指定”）.show（）；
}
});
document.addEventListener（“DOMContentLoaded”，function（）{$（“SelectType”）.trigger（“change”）；
})
$（函数（）{
$（'.OtherSpecify'）.show（）；
$（“其他”）。更改（功能（）{
如果（$（this）.is（“：selected”））{
$（this.parent（）.next（）.hide（）；
}
否则{
$（this.parent（）.next（）.show（）；
}
});
})

首先你应该检查工作原理。 在上面的HTML中，'$（“#SelectType”）-是您的选择，

$（“#OtherSpecify”）

是您的文本框。 如果您正在使用jQuery，那么应该一直使用它。 使用代替

DOMContentLoaded

事件：

<div class="form-group">
    <div class="col-md-1">
        @Html.DropDownList("SelectType", new List<SelectListItem> { 
                new SelectListItem{Text = "test 1", Value = "1"}, 
                new SelectListItem{Text = "test 2", Value = "2"}, 
                new SelectListItem{Text = "Other", Value = "3"} 
            }, new { @id = "SelectType" })
        @Html.TextBox("OtherSpecify", "")
    </div>
</div>
@section Scripts {
    <script>
        $(function() {
            $("#SelectType").on("change", function() {
                if (parseInt($("#SelectType").val()) == 3) {
                    $("#OtherSpecify").show();
                } else {
                    $("#OtherSpecify").hide();
                }
            });
            $("#SelectType").trigger("change");
        });
    </script> 
}

@Html.DropDownList（“SelectType”，新列表{
新建SelectListItem{Text=“test 1”，Value=“1”}，
新建SelectListItem{Text=“test 2”，Value=“2”}，
新建SelectListItem{Text=“Other”，Value=“3”}
}，新的{@id=“SelectType”}）
@TextBox（“OtherSpecify”，“”）
@节脚本{
$（函数（）{
$（“#选择类型”）。在（“更改”，函数（）上）{
if（parseInt（$（“#SelectType”）.val（））==3）{
$（“#其他指定”）.show（）；
}否则{
$（“#其他指定”）.hide（）；
}
});
$（“#选择类型”）.trigger（“更改”）；
});
}

---

请记住在加载jQuery库后放置脚本。在大多数情况下，

@section脚本

完成了这项工作。

我必须调整一些东西才能使Javascript正常工作。首先，我分离了我的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-4" })
                    <div class="col-md-4 sbchanged">
                        @Html.TextBoxFor(model => model.OtherSpecify)
                        @Html.ValidationMessageFor(model => model.OtherSpecify)
                    </div>
                </div>

@LabelFor（model=>model.SelectType，“SelectType”，新的{@class=“controllabel col-md-5”}）
@Html.DropDownList（“SelectType”，String.Empty）
@Html.ValidationMessageFor（model=>model.SelectType）
@LabelFor（model=>model.OtherSpecify，新的{@class=“controllabel col-md-4”}）
@Html.TextBoxFor（model=>model.OtherSpecify）
@Html.ValidationMessageFor（model=>model.OtherSpecify）

然后编写了以下JavaScript代码：

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

$（文档）.ready（函数（）{
//这条线无论如何都会开火
$（“#OtherSpecificForMgrGroup”）.hide（）；
$（“#选择类型”）.change（函数（）{
var value=document.getElementById（“SelectType”）.value；
如果（值=“4”）{
$（#OtherSpecifyFormGroup”）.show（“highlight”，{color:#7FAAFF}，1000）；
}
否则{
$（“#OtherSpecificForMgrGroup”）.hide（）；
}
});
})

---

我给我的表单组指定了一个ID，这样我就可以首先隐藏文本框。然后声明变量“value”，因为在我的数据库中填充DDL的值具有SelectType ID，因此它不会调用“Other”，因为它无法识别，但如调用值“4”时所示，它可以工作！else确保如果选择了任何其他DDL值，则文本框将再次隐藏。

使用JQuery指定ID时，请确保使用#<代码>$（“选择类型”）。触发器（“更改”）不使用一个，也不使用

$（“其他”）。更改（函数（）{

。唯一不使用任何东西的时间（表示

或

\

或类似的时间）是按元素类型选择时，例如

$（'form'）.submit（）

'。还有

$（'OtherSpecify'）.show（）；

将不起作用，因为您为元素指定了一个ID为

OtherSpecify

，而不是一个类。使用

$（'.OtherSpecify'）

将选择

类OtherSpecify

的所有元素。因此它需要一个类和一个ID？是的，您应该使用

$（'.\35; Other'）

选择它，因为这是您使用Razor:）给它的ID）我已经做了编辑。现在你可以把它粘贴到新创建的MVC项目中，它会工作的。