javascript - 选择下拉菜单中的值时隐藏表格

我有这些表格。

<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的表单。我不知道该怎么做。

最佳答案

您可以使用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>

关于javascript - 选择下拉菜单中的值时隐藏表格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27692068/