Question

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

下降值：1 =显示余额0

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

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

下降值：4 =显示余额0、1、2、3

观察

：

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

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

期望的行为：

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

@import "~bulma/sass/utilities/initial-variables";
@import "~bulma/sass/utilities/functions";

// Set your colors
$primary: #5B43CC;
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);
$facebook: #4267B2;
$facebook-invert: findColorInvert($facebook);

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

$custom-colors: (
  "foo": (black, grey),
);

@import "~bulma/sass/utilities/derived-variables";
@import "~bulma/sass/utilities/animations";
@import "~bulma/sass/utilities/mixins";
@import "~bulma/sass/utilities/controls";

Answer 1

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

您正在将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>

Answer 2

添加了event.preventDefault，因此该表单实际上并未提交并刷新页面，从而删除了客户端事件。在按钮上添加了click事件，并运行有条件的控件，该控件将样式属性设置为针对所选数字阻止。

我假设您想显示对应于其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>

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

2 个答案: