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

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

1 个答案: