Question

我在Razor视图中有一个DropDownList和一个TextArea。我希望TextArea仅在选择了下拉列表中的特定值时才可见。有什么解决方案呢？这是我到目前为止所尝试的但它不太正确，因为它假定设置了安全类型的值。

<tr>
    <td style="width: 200px; height: 30px">
        @Html.LabelFor(model => model.SecurityTypeId)
    </td>
    <td style="width: 400px; height: 30px">
        @Html.DropDownListFor(model => model.SecurityTypeId, Model.SecurityTypes, dropdownHtmlAttrs)
    </td>
    <td>&nbsp;</td>
</tr>
<tr>
    @if (Model.SecurityTypeId == (int)(SecurityType.Other))
    {
        <td style="width: 200px; height: 30px">
            @Html.LabelFor(model => model.Details)
        </td>
        <td style="width: 400px; height: 30px">
            @Html.TextAreaFor(model => model.Details, new { Style = "width:240px" })
        </td>
        <td>&nbsp;</td>
    }
</tr>

Answer 1

在使用show或hide方法处理客户端事件的视图元素的可见性时使用jQuery。这是一个例子：

<script type="text/javascript">
$(document).ready(function () {
     $('#SecurityTypeId').change(function () {
          var value = $(this).val(); // get selected value
          if (value == "set") { // this condition may adjusted to certain preset value
              $('#Details').show(); // show text area
          }
          else {
              $('#Details').hide(); // hide text area
          }
     });
});
</script>

如果您更喜欢使用香草JS：

<script type="text/javascript">
    var ddlvalue = document.getElementById("SecurityTypeId").value;
    if (ddlvalue == "set") {
        document.getElementById("Details")).style.visibility = "visible";
    }
    else {
        document.getElementById("Details")).style.visibility = "hidden";
    }
</script>

上述脚本假设DropDownListFor和TextAreaFor的id属性与模型绑定名称完全相同，具体取决于您的需求。

AFAIK，如果一个视图执行回调或回发，Razor中的语句工作，因此只会在ajax函数或表单提交后更改可见性。

欢迎任何建议和改进。

参考文献：

how to hide and show text box according to select value using jquery

Show/hide control based on dropdown selection mvc 4 razor c#

在同一视图中访问MVC下拉列表中的选定值

1 个答案: