使用 JavaScript 选择选择选项时显示 Div

作者

使用 JavaScript 选择选择选项时显示 Div

Show a Div when a Select option is Selected using JavaScript

要在选择选项时显示 div 元素：

  1. change向 select 元素添加事件侦听器。
  2. 每次触发事件时，检查是否选择了特定值。
  3. 如果是，请将 div 的display属性设置为block.

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <style>
    #box {
      display: none;
      background-color: salmon;
      color: white;
      width: 100px;
      height: 100px;
    }
  </style>
  <body>
    <label for="select">Choose an Option:</label>

    <select name="select" id="select">
      <option value="hide">Hide</option>
      <option value="show">Show</option>
    </select>

    <div id="box">Box content</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const el = document.getElementById('select');

const box = document.getElementById('box');

el.addEventListener('change', function handleChange(event) {
  if (event.target.value === 'show') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

我们

向
select元素添加了一个change事件监听器
。

每次选择元素的值发生变化时，都会调用该函数。 handleChange

我们
在对象上使用了目标event属性。该target属性是对调度事件的对象（元素）的引用。

在示例中，event.target属性指的是选择框。

要确定 是div应该显示还是隐藏，我们检查value选择元素的 是否设置为特定值并display
相应地设置元素的属性。

如果加载页面并将所选值更改为show，div则会出现该元素。

在选择选项上显示 div

如果您随后将元素的值更改回hide，div将再次隐藏。

我们在示例中
使用了display属性，但是，您可能需要
根据您的用例使用visibility属性。

当元素的display属性设置为时none，该元素将从 DOM 中移除并且不会影响布局。文档呈现为好像该元素不存在一样。

另一方面，当元素的visibility属性设置为hidden时，它仍会占用页面空间，但是该元素是不可见的（未绘制）。它仍然会像往常一样影响页面的布局。

使用可见性选择选择选项时显示 Div

visibility下面是一个使用该属性显示和隐藏
div特定选项被选中时的示例。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <style>
    #box {
      visibility: hidden;
      background-color: salmon;
      color: white;
      width: 100px;
      height: 100px;
    }
  </style>
  <body>
    <label for="select">Choose an Option:</label>

    <select name="select" id="select">
      <option value="hide">Hide</option>
      <option value="show">Show</option>
    </select>

    <div id="box">Box content</div>

    <div>More content here</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const el = document.getElementById('select');

const box = document.getElementById('box');

el.addEventListener('change', function handleChange(event) {
  if (event.target.value === 'show') {
    box.style.visibility = 'visible';
  } else {
    box.style.visibility = 'hidden';
  }
});

如果加载该页面，您会看到div仍然占用页面上的空间，即使它是隐藏的。

隐藏可见性的div

我们使用该visibility属性来隐藏div最初的元素，因此该元素不会被渲染，但仍会正常影响页面上的布局。

当您使用该display属性时，该元素会从 DOM 中取出并由其他元素取而代之。

移动页面上的内容可能会让用户感到困惑，应尽可能避免。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：