有条件地显示/隐藏 div

Question

当用户仅使用 vanilla javascript 选择“笔记本电脑”时，我想隐藏下面的 div

<select class="form-control input-lg" name="category">
      <option value="Desktop PCs &amp; Central unit">Desktop PCs &amp; Central unit</option>
      <option value="Laptop">Laptop</option>
    </select>

    <div class="form-group">
      <label class="" for="Name">Name</label>
      <input type="text"/>
    </div>

Answer 1

您可以使用addEventListener()将更改事件附加到选择元素。在事件处理函数内部检查值，如果是Laptop则将display属性设置为none else 将属性值设置为block。

尝试以下方式：

var element = document.querySelector("div.form-group");

document.querySelector('select[name=category]').addEventListener('change', function(){
  if(this.value == 'Laptop')
    element.style.display = 'none';
  else
    element.style.display = 'block';
})

<select class="form-control input-lg" name="category">
  <option value="Desktop PCs &amp; Central unit">Desktop PCs &amp; Central unit</option>
  <option value="Laptop">Laptop</option>
</select>

<div class="form-group">
  <label class="" for="Name">Name</label>
  <input type="text"/>
</div>