代码之家 › 专栏 › 技术社区 › Jake Hembree

多个下拉框

drop-down-menu forms css html javascript

0

Jake Hembree · 技术社区 · 2 年前

我正在尝试构建一个类似于下面的表单(为了隐私起见,我更改了内容),如果没有单独的下拉框相互抵消,我无法理解如何构建它。

很抱歉,我对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”,但这并没有解决问题。我希望能够让某人选择他们最喜欢的早餐下拉框,当他们选择他们最喜爱的果汁时,不清除为最喜爱的早餐选择的第一个值。

1 回复 | 直到 2 年前

1

0

Barmar 2 年前

两个下拉菜单调用相同 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>