Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

126
Views
Show/hide multiple forms depending on dropdown without conditional statements

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

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report

0

Yes. I would just use a Map and do something like this (UNTESTED!):


const myDropdown = document.querySelector("#myDropdown");

const resetVisibilityOfForms = () => Object.keys(formMap).forEach(form => document.querySelector(form).style.visibility = 'hidden');

const formMap = {
    'default': () => resetVisibilityOfForms(),
    'formId1': () => resetVisibilityOfForms() && document.querySelector('myForm1').style.visibility = 'visible',
    'formId2': () => resetVisibilityOfForms() && document.querySelector('myForm2').style.visibility = 'visible'
};

myDropdown.onchange = (e) => {
  const selectedForm = myDropdown.options[myDropdown.selectedIndex].value;

  formMap[selectedForm]();
};

// just hide all the forms by default...
resetVisibilityOfForms();

This would work with HTML like the following:

<form id="formId1">....</form>
<form id="formId2">....</form>

<select id="myDropdown">
    <option value="default">Choose a form</option>
    <option value="formId1">Form 1</option>
    <option value="formId2">Form 2</option>
</select>

There are many ways to improve the above code too. You could simplify the map, create a different type of map, use an array or any number of other different approaches. Point isn't to create a production ready example to the above though - just to create an example to give you some ideas of how to go about it.

Good luck!

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!