Question

我在页面上有两个选择框，编码如下：

<div class="form-group">
    @Html.LabelFor(model => model.SearchList, htmlAttributes: new {@class = "control-label col-md-2"})
    <div class="col-md-10">
        @Html.DropDownListFor(model => model.SearchListId, Model.SearchList, "Select Search Type", htmlAttributes: new { @class = "control-label input-width-xlarge", id = "SearchList" })
        @Html.ValidationMessageFor(model => model.SearchListId, "", new {@class = "text-danger"})
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.GroupSortTypes, htmlAttributes: new {@class = "control-label col-md-2"})
    <div class="col-md-10">
        @Html.DropDownListFor(model => model.GroupSortId, Model.GroupSortTypes, "Select Group Sort", htmlAttributes: new { @class = "control-label input-width-xlarge", id = "GroupSortTypes"})
        @Html.ValidationMessageFor(model => model.GroupSortId, "", new {@class = "text-danger"})
    </div>
</div>

如果在第一个选择特定选项时，如何才能使第二个选择框（GroupSort）可见？在这种情况下，它将是五个选项中的三个选项。

谢谢！

Answer 1

首先在第二个下拉列表中添加一个类hide，然后在js文件中写下以下代码

$(document).on('change','#SearchList',function(){
       var optionSelected = $("option:selected", this);// Use this if only needed
       var valueSelected = this.value;
       var textSelected = this.text;//Use any of the above either value or text in your if condition
       if(valueSelected=="Your Option")
       {
            $("#GroupSortTypes").removeClass("hide");
       }
       else
       {
            $("#GroupSortTypes").addClass("hide");
       }
});

如果选择了另一个选择框中的值，如何显示/隐藏选择框

1 个答案: