Show a Div when a Select option is Selected using JavaScript

Show a Div when a Select option is Selected using JavaScript #

To show a div element when a select option is selected:

Add a change event listener to the select element.
Each time the event is triggered, check if the specific value was selected.
If it was, set the div's display property to block.

Here is the HTML for the examples in this article.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <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>

And here is the related JavaScript code.

index.js

Copied!
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';
  }
});

We added a change event listener to the select element.

Every time the value of the select element changes, the handleChange function is invoked.

We used the target property on the event object. The target property is a reference to the object (element) on which the event was dispatched.

In the example, the event.target property refers to the select box.

To determine if the div should be shown or hidden, we check if the value of the select element is set to a specific value and set the element's display property accordingly.

If you load the page and change the selected value to show, you will see the div element appear.

show div on select option

If you then change the element's value back to hide, the div is hidden again.

We used the display property in the examples, however you might need to use the visibility property depending on your use case.

When an element's display property is set to none, the element is removed from the DOM and has no effect on the layout. The document is rendered as though the element does not exist.

On the other hand, when an element's visibility property is set to hidden, it still takes up space on the page, however the element is invisible (not drawn). It still affects the layout on your page as normal.

Here is an example that uses the visibility property to show and hide the div when a specific option is selected.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </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>

And here is the related JavaScript code.

index.js

Copied!
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';
  }
});

If you load the page, you'll see that the div still takes up space on the page, even though it is hidden.

div with visibility hidden

We used the visibility property to hide the div initially, so the element is not rendered, but still affects the layout on the page as normal.

Had we used the display property, the element would be taken out of the DOM and other elements would take its place.

Shifting the content on the page can be confusing to users and should be avoided when possible.

Show a Div when a Select option is Selected using JavaScript

Show a Div when a Select option is Selected using JavaScript #

Borislav Hadzhiev