Skip to content
Advertisement

Show/hide multiple forms depending on dropdown without conditional statements [closed]

I need to show/hide three forms depending on dropdown selected option without using conditional statements. Is it possible?

Advertisement

Answer

You can do it like so, please reference with: https://api.jquery.com/on/

The idea is to apply event listener for each select option.

const $selectElement = $('#select');

$selectElement.on('change', () => {
  $('form').css('display', 'none');
  $(`[data-id="${$selectElement.val()}"]`).css('display', 'block');
});
form {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="select">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<form data-id="1">
  <span>1</span>
</form>

<form data-id="2">
  <span>2</span>
</form>

<form data-id="3">
  <span>3</span>
</form>
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement