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

Question

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

假设这个选择框的名称是：selectbox1.

有3 rows.

1.row => 有一个名为 selectbox2 的选择框和一个名为 textbox1

的文本框

2.row => 有一个名为 selectbox3 的选择框和一个名为 textbox2

的文本框

3.row => 有一个名为 selectbox4 的选择框和一个名为 textbox3

的文本框

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

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

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

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

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

Answer 1

<!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';

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

How can I show or hide rows depending on a value in selectbox?

javascript

angularjs