Question

当用户仅使用普通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（）将 change 事件附加到select元素。在事件处理函数内部检查值，如果它是 Laptop ，则将 display 属性设置为 none ，否则将属性值设置为阻止。

尝试以下方式：

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>

Answer 2

您在这里，自己测试一下，效果很好...

<script type="text/javascript">
function hideDiv(elem) {
    if(elem.value == "Laptop")
	document.getElementById('hideDiv').style.display = "none";
    else
        document.getElementById('hideDiv').style.display = 'block';
}
</script>

<select class="form-control input-lg" onchange="hideDiv(this)" name="category">
  <option value="Desktop PCs &amp; Central unit">Desktop PCs &amp; Central unit</option>
  <option value="Laptop">Laptop</option>
</select>

<div id="hideDiv" class="form-group">
  <label class="" for="Name">Name</label>
  <input type="text"/>
</div>

有条件显示/隐藏div

2 个答案: