文章/答案/技术大牛

发布

社区首页 >问答首页 >根据用户选择的下拉菜单选项显示div

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

Stack Overflow用户

提问于 2020-06-02 07:12:43

回答 2查看 534关注 0票数 0

代码的目的是让用户从下拉菜单中选择一个数字，并显示相应的div。divs的起点总是隐藏着所有的东西。Javascript应该使用“用户选择的数字”来决定显示多少div。在这种情况下，如下：

下拉-值:1=显示余额0

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

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

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

观察：

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

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

想要行为：

前面的用户应该能够在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>

html

css

drop-down-menu

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-06-02 08:00:04

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

我假设您想要显示每个数字对应的amount的div，那么如果选择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

Stack Overflow用户

发布于 2020-06-02 07:58:52

您应该在代码中考虑以下几点。

You使用 button 和 type="submit"，这会导致页面每次重新加载并运行相同的脚本，因此，dropdown).
You的值总是相同的(在您的情况下，这是您在ones.
You中的第一个选项)，它总是只显示在每个特定条件下的块，并且不考虑隐藏不必要的amountOfBalanceColumnsToShow通过它的 id获取元素，其中balance div's有类而不是id's.

。

要解决这些问题，您应该首先向submit按钮添加一个事件侦听器并防止它的默认操作，然后使用balance 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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62146706

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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