【问题标题】：Hide a Drop-down list if an other drop-down list has a selected value如果其他下拉列表具有选定值，则隐藏下拉列表
【发布时间】：2017-11-22 10:01:02
【问题描述】：

我有两个下拉列表，我的任务是隐藏下拉列表之一。如果用户在下拉列表 1 中选择一个值，我需要隐藏下拉列表 2，反之亦然。

 @if (Model.DeputyId == null)
                        {
                        <div class="form-group">
                            <label>@Html.DrawLabel("PoliticalGroup")</label>
                            @Html.DropDownListFor(m => m.PoliticalGroupId, Model.PoliticalGroups, @Html.DrawLabel("SelectAPoliticalGroup"), new { @class = "form-control" })
                        </div>
                        }
                        @if (Model.PoliticalGroupId == null)
                        {
                        <div class="form-group">
                            <label>@Html.DrawLabel("Deputy")</label>
                            @Html.DropDownListFor(m => m.DeputyId, Model.Deputies, @Html.DrawLabel("SelectADeputy"), new { @class = "form-control" })
                        </div>
                        }

这是我需要根据用户选择控制显示哪一个和隐藏哪一个的两个下拉列表。感谢您的宝贵时间

【问题讨论】：

你愿意使用客户端JS吗？我认为您可以从第一个 DDLF 处理 onchange 事件，并为第二个 DDLF 使用 hide() 方法。
是的，这是个好主意，jQuery 会更好

标签： .net asp.net-mvc razor c#-4.0

【解决方案1】：

为两个下拉菜单指定相同的类（在本例中为“ddl”）

@Html.DropDownListFor(model => model.A3, new SelectList(Model.lstManager3, "Value", "Text", Model.A3), "Select", new { @class = "ddl form-control" })

@Html.DropDownListFor(model => model.A4, new SelectList(Model.lstManager4, "Value", "Text", Model.A4), "Select", new { @class = "ddl form-control" })

jquery 代码

    var className = '.ddl';
    var defaultDdl1Text = 'SelectAPoliticalGroup';
    var defaultDdl2Text = 'SelectADeputy';


     $(className).change(function () {
        var Value = this.value;
        var Text = $(this).find('option:selected').text();
        if (Text != defaultDdl1Text && Text != defaultDdl2Text) {
            $(className).not(this).hide();
        }
        else {
            $(className).not(this).show();
        }
    });

【讨论】：

我的项目中不允许使用硬编码选项，因此无法使用此 var 值

【解决方案2】：

<script>

$(document).ready(function () {
    
    $('.target').on('change', function () {
     if ($(".target").children()[1].selected)
        {
            $(".target1").show();
            $(".target2").hide();
            $(".ddl1").val("");
        }
     else if ($(".target").children()[2].selected)
        {
            $(".target2").show();
            $(".target1").hide();
            $(".ddl2").val("");
        }

    });
});

这是此问题的潜在解决方案。除此之外，我只是在 HTML 中添加了一些类。

【讨论】：