使用 jQuery 在 MVC 中隐藏或显示基于 DDL 选择的表单控件

Question

我的问题类似于基于下拉选择显示div的问题。 我在div 中有一个下拉列表，其中包含四个选项。 根据选择哪个控件，我希望在下一个div 中显示其他两个控件之一，在一种情况下，它将显示一个EditorFor，我希望填充该值。 这是我所拥有的...

<div class="form-group">
    @Html.Label("OriginType", htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-4">
        @Html.DropDownList("OriginType", ViewData["OriginType"] as SelectList, new { htmlAttributes = new { @class = "form-control" } })
    </div>
</div>
<div class="form-group" id="pnlOrigin">
    @Html.LabelFor(model => model.Origin, htmlAttributes: new { @class = "control-label col-md-2" })
    <div id="pnlOrigin1"class="col-md-4">
        @Html.DropDownList("ddlORDER_10", (IEnumerable<SelectListItem>)ViewBag.Order, "Select an Order Number", new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Origin, "", new { @class = "text-danger" })
    </div>
    <div id="pnlOrigin2"class="col-md-4">
        @Html.EditorFor(model => model.Origin, new { htmlAttributes = new { @class = "form-control", @id = "tbOrigin" } })
        @Html.ValidationMessageFor(model => model.Origin, "", new { @class = "text-danger" })
    </div>
</div>

所以我需要的是当用户从OriginType下拉列表中选择（STK、PO、WO、OTHER）时，它将显示或隐藏pnlOrigindiv 中的下拉列表或EditorFor。 如果选择了PO或WO，它将显示 ddl。 如果选择了OTHER或STK，它将显示EditorFor，如果是STK，它将用STK预填充编辑器。

我尝试修改引用帖子中的函数，但它最初并没有隐藏控件，并且从OriginType下拉列表中选择没有任何影响？

这是我创建的jQuery。 我不确定我哪里出错了。

$(document).ready(function () {
    function ShowOptions(originType) {
        if (OriginType == "0"){
            $("#pnlOrigin").hide();
            $("#pnlOrigin1").hide();
            $("#pnlOrigin2").hide();
            // hide all before show
            var showOriginPanel = false;
        }
        if (OriginType == 'STK') {
            $("#pnlOrigin").show();
            $("#tbOrigin").val('STK');
            showOriginPanel = true;
        }
        if (OriginType == 'PO') {
            $("#pnlOrigin1").show();
            showOriginPanel = true;
        }
        if (OriginType == 'WO') {
            $("#pnlOrigin1").show();
            showOriginPanel = true;
        }
        if (OriginType == 'OTHER'){
            $("#pnlOrigin2").show();
            showOriginPanel = true;
        }
        if(showOriginPanel) {
            $("#pnlOrigin").show();
        }       
    }
    ShowOptions($("#OriginType").val());
    $("#OriginType").change(function () {        
        ShowOptions($(this).val());
    });
});

任何帮助将不胜感激！

Answer 1

我似乎发现了我的代码的问题，尽管我不确定为什么它会影响该功能。 我为两个隐藏控件声明了 htmlAttribues 为"new { htmlAttributes = new { @class = "form-control" } }"。 一旦我将它们更改为"htmlAttributes： new { @class = "form-control" }"，函数就开始正常工作。

我还必须添加一些 .hide，以防用户在发布之前更改其初始选择。