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.

index.html

Copied!
<!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>

The code for this article is available on GitHub

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

The code for this article is available on GitHub

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 then set the element's display property accordingly.

If you load the page and change the selected value to show, the div element appears.

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 does not affect 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 of your page as normal.

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

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" />
    <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>

The code for this article is available on GitHub

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

The code for this article is available on GitHub

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.

When you use the display property, the element is taken out of the DOM and other elements take its place.

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

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Show a Div when a Select option is Selected using JavaScript