时间戳

首页 > 解决方案 > 如何根据选择框中的值显示或隐藏行？

javascript - 如何根据选择框中的值显示或隐藏行？

问题描述

我有一个SelectBox，它的值可以是1,2,3.

可以说这个选择框的名称是 : selectbox1。

有3 rows。

1.row => 有名为selectbox2的选择框和名为的文本框textbox1

2.row => 有 selectBox namedselectbox3和 textbox namedtextbox2

3.row => 有 selectBox namedselectbox4和 textbox namedtextbox3

如果 selextBox1 中的值等于 1，则只显示 1.row 即 selextbox2 和 textbox1

我可以通过此代码获取 selectbox1 中的值，

var source = document.getElementsByName("selectbox1")[0].value;

但我无法根据 selextbox1 的输出显示和隐藏行

写什么函数来解决这个问题？

标签： javascriptangularjs

解决方案

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<label for="vals">Choose</label>
  <select name="vals" id="vals" onchange="updateDisplay(this.value)">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <div id='row1'>
    <p>this is row 1</p>  
  </div>

  <div id='row2' style="display:none;">
    <p>this is row 2</p>  
  </div>
  
  <div id='row3' style="display:none;">
    <p>this is row 3</p>  
  </div>

<script>
const updateDisplay = (rowNumber) => {
    for(let i=1;i<4;i++) $(`#row${i}`).hide(); // hide all rows
    $(`#row${rowNumber}`).show();// show the required row
}
</script>

</body>
</html>

我使用了 jQuery 的隐藏和显示功能来使代码看起来更简单。同样可以使用 vanilla JavaScript 来实现，例如：

隐藏-> document.getElementById("row2").style.display = 'none';

SHOW -> document.getElementById("row2").style.display = 'block';

推荐阅读