Show/hide fields depending on select value

Question

I am trying to show and hide a few form fields depending on the value of one of my select fields. I am looking to use arrays to hold what should be shown and what should not

Answer 1

Here is a very simple example:

The purpose is to show A SIMPLE EXAMPLE of how to use an array of values to show/hide fields depending upon the value of a select.

In this demo, I could have used the classNames to show/hide the group of fields all-at-once -- but that's not the purpose of the example -- so the classNames were used only for CSS.

Because the demo uses IDs (with two arrays of these IDs) for the demo, it doesn't matter whether the fields to be hidden are input fields, divs, imgs or what-have-you. The ID identifies whatever-it-is-to-be-hid.

var aPeople = ['bob','sam','ted'];
var aTransport = ['car','bike','truck'];

$('#mySel').change(function(){
   $('.alldiv').hide(); //Hide them all to start...
   let sel = $(this).val(); //Get selected option value
   if ( sel=='ppl' ){
      for (let i=0; i

.alldiv{width:30vw;height:10vh;padding:2vh 2vw;text-align:center;}
.ppl{background:palegreen;}
.tpt{background:wheat;}

  Choose:
  People
  Vehicles


People: Bob
Vehicle: Car
Vehicle: Truck
People: Sam
People: Ted
Vehicle: Bike