Skip to main content

How to Show a Div When a Select Option is Selected in JavaScript

A very common feature in web forms is a "conditional field"—an element that is shown or hidden based on the value of a dropdown menu (<select>). This is essential for creating dynamic forms that only show relevant inputs to the user.

This guide will teach you the standard and most effective way to show or hide a div by listening for the change event on a <select> element.

The Core Method: The change Event Listener​

The change event is the key to this functionality. It fires on a <select> element whenever the user selects a new <option>. We can listen for this event to get the new value and then update the visibility of other elements on the page accordingly.

The logic:

  1. Add a change event listener to the <select> element.
  2. Inside the event handler function, get the selected value from event.target.value.
  3. Use an if/else or switch statement to check the value.
  4. Based on the value, update the style.display property of the target div(s).

Basic Example: Toggling a Single div​

This example shows how to reveal a hidden div when a specific option is chosen.

Problem: you have a "Show" option in a dropdown that should make a hidden div appear.

<select id="visibility-select">
  <option value="hide">Hide Box</option>
  <option value="show">Show Box</option>
</select>

<div id="hidden-box" style="display: none; background-color: salmon; padding: 10px;">
  I am the hidden box!
</div>

Solution:

const visibilitySelect = document.getElementById('visibility-select');
const hiddenBox = document.getElementById('hidden-box');

visibilitySelect.addEventListener('change', (event) => {
  if (event.target.value === 'show') {
    hiddenBox.style.display = 'block';
  } else {
    hiddenBox.style.display = 'none';
  }
});

Now, when the user selects "Show Box," the div will appear. When they select "Hide Box," it will disappear.

A More Practical Example: Toggling Between Multiple divs​

A more common use case is to have a dropdown that controls which one of several divs is visible, such as for selecting a payment method.

This is best handled by creating a reusable function that hides all the option divs and then shows only the one that corresponds to the selected value.

HTML:

<label for="payment-method">Payment Method:</label>
<select id="payment-method">
  <option value="">--Select One--</option>
  <option value="credit-card">Credit Card</option>
  <option value="paypal">PayPal</option>
</select>

<!-- The conditional divs -->
<div id="credit-card-fields" class="payment-fields" style="display: none;">
  <!-- Credit card inputs would go here -->
  <p>Credit Card Form</p>
</div>

<div id="paypal-fields" class="payment-fields" style="display: none;">
  <!-- PayPal button would go here -->
  <p>PayPal Button</p>
</div>

JavaScript:

const paymentSelect = document.getElementById('payment-method');
const allFields = document.querySelectorAll('.payment-fields');

paymentSelect.addEventListener('change', (event) => {
  const selectedValue = event.target.value;
  
  // 1. Hide all the conditional divs first.
  allFields.forEach(div => {
    div.style.display = 'none';
  });
  
  // 2. If a valid option was chosen, show the corresponding div.
  if (selectedValue) {
    const elementToShow = document.getElementById(`${selectedValue}-fields`);
    if (elementToShow) {
      elementToShow.style.display = 'block';
    }
  }
});
note

This pattern is robust and scalable. You can add more payment options just by adding the corresponding HTML and a new <option> without changing the JavaScript logic.

A Note on display: none vs. visibility: hidden​

It's important to choose the right CSS property for hiding your element.

  • display: none;: This removes the element completely from the document layout. It takes up no space, and other elements will reflow to fill its spot. This is the most common method.
  • visibility: hidden;: This makes the element invisible, but it still occupies its original space in the layout. This is useful if you want to avoid a "jump" in your page layout when the element appears or disappears.

To use visibility, your JavaScript would look like this:

// To show
myElement.style.visibility = 'visible';
// To hide
myElement.style.visibility = 'hidden';

Conclusion​

Showing a div based on a <select> option is a fundamental technique for creating interactive forms.

  • The change event listener is the key to detecting when a user has made a new selection.
  • Inside the listener, get the new value from event.target.value.
  • Use this value to programmatically change the style.display or style.visibility property of your target div(s).
  • For toggling between multiple elements, a function that hides all and then shows one is a robust and scalable pattern.

Table of Contents