Show/Hide different forms based on a option selected

Question

I would like to know how to show/hide different forms based one form\'s selection.

In the sample code below all three forms are automatically set to display:none. I woul

Answer 1

For future readers, this setup will show/hide those forms dynamically with no external libraries:

function changeOptions(selectEl) {
  let selectedValue = selectEl.options[selectEl.selectedIndex].value;
  let subForms = document.getElementsByClassName('className')
  for (let i = 0; i < subForms.length; i += 1) {
    if (selectedValue === subForms[i].name) {
      subForms[i].setAttribute('style', 'display:block')
    } else {
      subForms[i].setAttribute('style', 'display:none') 
    }
  }
}

Then the html:

  
  Form 1
  Form 2
  Form 3



  



  



  
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​