javascript html css forms drop-down-menu

Multiple Dropdown Boxes

I'm trying to build a form similar to the one below (I changed the content for privacy), and I cannot figure out how to build this without the separate dropdown boxes canceling each other out.

I'm sorry to say that I don't know much of anything about JavaScript. I found this code and modified the values that I needed, and built a second dropdown, which is when I learned that "OnChange" seems to cancel out anything that's currently selected. In the real form that I'll be using, I'll have up to 5 different drop-down options.

function showPara(val) {
  // check if the value is not empty or undefined

  if (val !== undefined && val !== "") {

    // then selelct all the p element which have a common class and add the coass which hide the element

    document.querySelectorAll(".pClass").forEach(function(item) {
      item.classList.add("hidePara");

      // remove the class hide element where the id of p matches with the selected value

      document.getElementById(val).classList.remove('hidePara')
    })
  }
}

.hidePara {
  display: none;
}

.pClass {
  color: blue;
}

<form>
  Favorite Breakfast
  <br>
  <select onchange="showPara(this.value)">
    <option>Select</option>
    <option value='6A'>Pancakes</option>
    <option value='6B'>Waffles</option>
  </select>

  <br>
  <br> Favorite Juice
  <br>
  <select onchange="showPara(this.value)">
    <option>Select</option>
    <option value='6C'>Orange</option>
    <option value='6D'>Grape</option>
  </select>
</form>

<div>

  Alert - Garmin Terms Violation
  <br><br> Dear Breakfast Club Member,
  <br><br> We want to take a quick survey for the upcoming breakfast event. Please select an option for both questions.
  <br><br> Favorite Breakfast:
  <!-- ------------------------------------------------------------------------------------------------- -->
  <span id="6A" class="pClass hidePara">Pancakes</span>
  <span id="6B" class="pClass hidePara">Waffles</span>
  <!-- ------------------------------------------------------------------------------------------------- -->
  <br> Favorite Juice:
  <!-- ------------------------------------------------------------------------------------------------- -->
  <span id="6C" class="pClass hidePara">Orange</span>
  <span id="6D" class="pClass hidePara">Grape</span>
  <!-- ------------------------------------------------------------------------------------------------- -->
  <br><br> Thank you so much for participating.
  <br><br> Regards,
  <br> Breakfast Club President
</div>

I tried to change "OnChange" to "OnSelect," but that didn't fix the issue. I want to be able to have someone select their favorite breakfast dropdown box and when they select their favorite juice, not clear out the first value selected for the favorite breakfast.

Solution

Both dropdowns are calling the same showPara() function. So of course they overwrite each other. If you want the output in different places, you need some way to distinguish which dropdown they selected from, so the output can be displayed in a different place.

One way is to give the function a second parameter that indicates where it should show the result. You can use container divs with IDs to match this parameter.

function showPara(val, id) {
  if (val) {
    let container = document.getElementById(id);
    container.querySelectorAll(".pClass").forEach(function(item) {
      // hide all the items except the selected one
      item.classList.toggle("hidePara", item.id != val);
    })
  }
}

.hidePara {
  display: none;
}

.pClass {
  color: blue;
}

<form>
  Favorite Breakfast
  <br>
  <select onchange="showPara(this.value, 'breakfast')">
    <option>Select</option>
    <option value='6A'>Pancakes</option>
    <option value='6B'>Waffles</option>
  </select>

  <br>
  <br> Favorite Juice
  <br>
  <select onchange="showPara(this.value, 'juice')">
    <option>Select</option>
    <option value='6C'>Orange</option>
    <option value='6D'>Grape</option>
  </select>
</form>

<div>

  Alert - Garmin Terms Violation
  <br><br> Dear Breakfast Club Member,
  <br><br> We want to take a quick survey for the upcoming breakfast event. Please select an option for both questions.
  <div id="breakfast">
    <br><br> Favorite Breakfast:
    <!-- ------------------------------------------------------------------------------------------------- -->
    <span id="6A" class="pClass hidePara">Pancakes</span>
    <span id="6B" class="pClass hidePara">Waffles</span>
    <!-- ------------------------------------------------------------------------------------------------- -->
  </div>
  <div id="juice">
    <br> Favorite Juice:
    <!-- ------------------------------------------------------------------------------------------------- -->
    <span id="6C" class="pClass hidePara">Orange</span>
    <span id="6D" class="pClass hidePara">Grape</span>
    <!-- ------------------------------------------------------------------------------------------------- -->
  </div>
  <br><br> Thank you so much for participating.
  <br><br> Regards,
  <br> Breakfast Club President
</div>