Question

我有这些表格。

<div class="form-group">
  @Html.LabelFor(model => model.RoomsNumber, htmlAttributes: new { @class = "control-label col-md-2" })
  <div class="col-md-10">
    @Html.EditorFor(model => model.RoomsNumber, new { htmlAttributes = new { @class = "form-control" } })
    @Html.ValidationMessageFor(model => model.RoomsNumber, "", new { @class = "text-danger" })
  </div>
</div>

<div class="form-group">
  @Html.LabelFor(model => model.ProductCategoryId, "Type of home", htmlAttributes: new { @class = "control-label col-md-2"})
  <div class="col-md-10">
    @Html.DropDownList("ProductCategoryId", null, htmlAttributes: new { @class = "form-control" })
    @Html.ValidationMessageFor(model => model.ProductCategoryId, "", new { @class = "text-danger" })
  </div>
</div>

我希望当我从下拉列表中选择某个值时，使用RoomsNumber隐藏表单。我不知道该怎么做。

Answer 1

您可以使用JavaScript轻松完成，会议室需要 ID ，产品类别需要 ID 下拉列表，然后您需要添加事件监听器以听取下拉菜单的更改事件：

<强> JS

var ddl = document.getElementById('ddlProductCategory'),
    form = document.getElementById('roomsForm');

ddl.addEventListener('change', function(){
 if (this.value === '5'){
   form.style.display = 'none';
 }
 else {
   form.style.display = 'block';
 }
});

<强> HTML

<div class="form-group" id="roomsForm">
  @Html.LabelFor(model => model.RoomsNumber, htmlAttributes: new { @class = "control-label col-md-2" })
  <div class="col-md-10">
    @Html.EditorFor(model => model.RoomsNumber, new { htmlAttributes = new { @class = "form-control" } })
    @Html.ValidationMessageFor(model => model.RoomsNumber, "", new { @class = "text-danger" })
  </div>
</div>

<div class="form-group">
  @Html.LabelFor(model => model.ProductCategoryId, "Type of home", htmlAttributes: new { @class = "control-label col-md-2"})
  <div class="col-md-10">
    @Html.DropDownList("ProductCategoryId", null, htmlAttributes: new { @class = "form-control", id = 'ddlProductCategory" })
    @Html.ValidationMessageFor(model => model.ProductCategoryId, "", new { @class = "text-danger" })
  </div>
</div>

选择下拉值时隐藏表单

1 个答案: