根据用户选择的下拉菜单选项显示 div答案

【问题标题】：Show divs based on dropdown-menu-option selected by user根据用户选择的下拉菜单选项显示 div
【发布时间】：2020-06-02 07:12:43
【问题描述】：

代码的目的是让用户从下拉菜单中选择一个数字并显示相应的 div。 div 的出发点始终是全部隐藏。 Javascript 应该使用“用户选择的数字”来决定要显示多少个 div。在这种情况下如下：

下拉值：1 = 显示余额 0

下拉值：2 = 显示余额 0,1

下拉值：3 = 显示余额 0,1,2

下拉值：4 = 显示余额 0,1,2,3

观察：

我怀疑问题在于 javascript 只选择了预定义为“已选择”的选项，这意味着它永远不会将用户选择的值用于进一步处理。

$_POST 的 var_dump 显示正确的结果/打印输出，每次用户从下拉菜单中选择一个选项。

想要的行为：

前端的用户应该能够在 1-4 之间的下拉列表中选择一个值，并且相应的 div（参见上面的列表）应该是可见的。

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8">
  <title>Show divs based on dropdown</title>

  <style>
    .balance_0,
    .balance_1,
    .balance_2,
    .balance_3
     {
      display: none;
    }
  </style>

</head>
<body>

<!-- Form (Years-selector) -->

<form class="year-selector" method="post">

  <select class="dropdown_result" id="dropdown_result" name="selection">

    <option value="" selected="selected" hidden="hidden">Select amount of years to report...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>

  </select>

  <button type="submit" name="button">Send</button>

</form>

<!-- Divs -->

<div class="balance_0">Balance-0</div>
<div class="balance_1">Balance-1</div>
<div class="balance_2">Balance-2</div>
<div class="balance_3">Balance-3</div>

<pre>

<?php var_dump($_POST); ?>

<script>

// Extract selected dropdown menu option.
var amountOfBalanceColumnsToShow =
  document.getElementById("dropdown_result").selectedOptions[0].value;

// Show amount of balance divs based on above form.

if (amountOfBalanceColumnsToShow == 1) {
  var x = document.getElementById("balance_0");
    x.style.display = "block";
}

else if (amountOfBalanceColumnsToShow == 2) {
  for (var i = 0; i <= 1; i++) {
  var x = document.getElementById("balance_" + i);
    x.style.display = "block";
  }
}

else if (amountOfBalanceColumnsToShow == 3) {
  for (var i = 0; i <= 2; i++) {
  var x = document.getElementById("balance_" + i);
    x.style.display = "block";
  }
}

else if (amountOfBalanceColumnsToShow == 4) {
  for (var i = 0; i <= 3; i++) {
  var x = document.getElementById("balance_" + i);
    x.style.display = "block";
  }

}


</script>

</body>
</html>

【问题讨论】：

标签： javascript html css drop-down-menu

【解决方案1】：

添加了 event.preventDefault，因此表单实际上不会提交和刷新页面，从而删除客户端事件。为按钮添加了一个点击事件，并运行了将样式属性设置为阻止所选数字的条件。

我假设你想显示每个数字对应于他们的 div 的 amount，所以如果选择 3 显示 balance_0, balance_1, balance_2 对吗？

let e = document.querySelector('#dropdown_result');

let send = document.querySelector('#button');
let one = document.querySelector('.balance_0');
let two = document.querySelector('.balance_1');
let three = document.querySelector('.balance_2');
let four = document.querySelector('.balance_3');
let selected;
  send.addEventListener('click', event => {    
    selected = Number(e.options[e.selectedIndex].value);
    if(selected === 1){
      one.style.display = "block";
      two.style.display = "none";
      three.style.display = "none";
      four.style.display = "none";
    }else if(selected === 2){
      one.style.display = "block";
      two.style.display = "block";
      three.style.display = "none";
      four.style.display = "none";
    }else if(selected === 3){
      one.style.display = "bloc";
      two.style.display = "block";
      three.style.display = "block";
      four.style.display = "none";
    }else if(selected === 4){
      one.style.display = "block";
      two.style.display = "block";
      three.style.display = "block";
      four.style.display = "block";
    }
    event.preventDefault();
  });

.balance_0,
    .balance_1,
    .balance_2,
    .balance_3
     {
      display: none;
    }

<form class="year-selector" method="post">

  <select class="dropdown_result" id="dropdown_result" name="selection">

    <option value="" selected="selected">Select amount of years to report...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>

  </select>

  <button type="submit" id="button" name="button">Send</button>

</form>

<!-- Divs -->

<div class="balance_0">Balance-0</div>
<div class="balance_1">Balance-1</div>
<div class="balance_2">Balance-2</div>
<div class="balance_3">Balance-3</div>

【讨论】：

您的假设是正确的，并且下拉菜单 (1,2,3,4) 的选项变化显示了正确的结果。

【解决方案2】：

您应该在代码中考虑几件事情。

您正在使用 button 和 type="submit"，这会导致页面每次重新加载并运行相同的脚本，因此 amountOfBalanceColumnsToShow 的值将始终相同（在您的情况下是您在下拉菜单中的第一个选项）。
您总是只在每个特定条件下显示块，而不会考虑隐藏不必要的块。
您正在通过其id 获取元素，其中余额 div 的类而不是 id 的类。

要解决这些问题，您应该首先向您的提交按钮添加一个事件侦听器并阻止其默认操作，然后获取平衡为class 的所有元素，然后根据您的条件遍历它们并指定哪个元素必须显示和隐藏哪个。

所以你的最终代码应该是这样的：

// Extract selected dropdown menu option.
var element = document.getElementById("dropdown_result");
var submitButton = document.querySelector('button[type="submit"]');
var balanceDivs = document.querySelectorAll("[class*='balance']");
var balanceDivsLength = balanceDivs.length;

submitButton.addEventListener("click", function(event) {
  event.preventDefault();

  var amountOfBalanceColumnsToShow =
    element.options[element.selectedIndex].value;

  // Show amount of balance divs based on above form.

  if (amountOfBalanceColumnsToShow == 1) {
    for (var i = 0; i < balanceDivsLength; i++) {
      if (balanceDivs[i].classList.contains("balance_0")) {
        balanceDivs[i].style.display = "block";
      } else {
        balanceDivs[i].style.display = "none";
      }
    }
  } else if (amountOfBalanceColumnsToShow == 2) {
    for (var i = 0; i < balanceDivsLength; i++) {
      if (
        balanceDivs[i].classList.contains("balance_0") ||
        balanceDivs[i].classList.contains("balance_1")
      ) {
        balanceDivs[i].style.display = "block";
      } else {
        balanceDivs[i].style.display = "none";
      }
    }
  } else if (amountOfBalanceColumnsToShow == 3) {
    for (var i = 0; i < balanceDivsLength; i++) {
      if (!balanceDivs[i].classList.contains("balance_3")) {
        balanceDivs[i].style.display = "block";
      } else {
        balanceDivs[i].style.display = "none";
      }
    }
  } else if (amountOfBalanceColumnsToShow == 4) {
    for (var i = 0; i < balanceDivsLength; i++) {
      balanceDivs[i].style.display = "block";
    }
  }
});

.balance_0,
.balance_1,
.balance_2,
.balance_3 {
  display: none;
}

<!-- Form (Years-selector) -->

<form class="year-selector" method="post">

  <select class="dropdown_result" id="dropdown_result" name="selection">

    <option value="" selected="selected" hidden="hidden">Select amount of years to report...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>

  </select>

  <button type="submit" name="button">Send</button>

</form>

<!-- Divs -->

<div class="balance_0">Balance-0</div>
<div class="balance_1">Balance-1</div>
<div class="balance_2">Balance-2</div>
<div class="balance_3">Balance-3</div>

【讨论】：