多个下拉框

Question

我正在尝试构建一个类似于下面的表单（出于隐私原因我更改了内容），但我无法弄清楚如何在不使单独的下拉框相互抵消的情况下构建此表单。

很抱歉，我对 JavaScript 知之甚少。我找到了这段代码并修改了我需要的值，并构建了第二个下拉列表，此时我了解到“OnChange”似乎取消了当前选择的任何内容。在我将使用的真实形式中，我将有多达 5 个不同的下拉选项。

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>

我尝试将“OnChange”更改为“OnSelect”，但这并没有解决问题。 我希望能够让人们选择他们最喜欢的早餐下拉框，当他们选择他们最喜欢的果汁时，不要清除为最喜欢的早餐选择的第一个值。

Answer 1

两个下拉菜单都调用相同的

showPara()

函数。所以它们当然会互相覆盖。如果你想在不同的地方输出，你需要一些方法来区分他们从哪个下拉列表中选择，这样输出就可以显示在不同的地方。

一种方法是为函数提供第二个参数，指示应在何处显示结果。您可以使用带有 ID 的容器 div 来匹配此参数。

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>