I was wondering if someone could please point me in the right direction with this bit of JavaScript I have been working on.I have made this form that currently has onblur JavaScript validation and additionally I am to make it dynamic so that when a user selects an option from a dropdown option form a div is shown with corresponding options.  But at the moment that code I have written for this is looking pretty repetitive and suffering from 'code smell'.Is there a better way to do this? I am thinking a for loop that iterates through the dropdown options but am not 100% sure how to put this in place?adventureForm = document.querySelector('#adventure');       charterDrop = document.querySelector('.charter-options');       mountainDrop = document.querySelector('.mountain-lake-options');       trampDrop = document.querySelector('.tramp-options');       photoDrop = document.querySelector('.photo-options');       dropDowns =  document.querySelector('#dropdowns');      // check adventure dropdown choice      if (field.id === adventure && adventureForm.selectedIndex === 0) {      dropDowns.classList.add('hidden');          } else if (field.id === adventure && adventureForm.selectedIndex === 1)  {              dropDowns.classList.remove('hidden');             charterDrop.classList.remove('hidden');           mountainDrop.classList.add('hidden');           trampDrop.classList.add('hidden');           photoDrop.classList.add('hidden');         } else if (field.id === adventure && adventureForm.selectedIndex === 2)  {           dropDowns.classList.remove('hidden');           charterDrop.classList.add('hidden');           mountainDrop.classList.remove('hidden');           trampDrop.classList.add('hidden');           photoDrop.classList.add('hidden');         } else if (field.id === adventure && adventureForm.selectedIndex === 3)  {           dropDowns.classList.remove('hidden');           charterDrop.classList.add('hidden');           mountainDrop.classList.add('hidden');           trampDrop.classList.remove('hidden');           photoDrop.classList.add('hidden');         } else if (field.id === adventure && adventureForm.selectedIndex === 4)  {           dropDowns.classList.remove('hidden');           charterDrop.classList.add('hidden');           mountainDrop.classList.add('hidden');           trampDrop.classList.add('hidden');           photoDrop.classList.remove('hidden');         }You can view the JSBin link here.
Displaying dependent options when a selection is made in a dropdown
javascript;form;dom