JSP中的下拉显示隐藏DIV事件 - JavaScript

在JSP中，我们经常需要实现下拉显示/隐藏DIV的功能。下面是一个简单的示例，演示如何使用JavaScript实现这种效果。

HTML代码

我们首先需要定义一个下拉列表，当用户选择其中一个选项时，我们希望显示一个相关的DIV。以下是HTML代码：

<select id="mySelect" onchange="showHideDiv()">
  <option value="">请选择</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
</select>

<div id="myDiv1" style="display:none;">
  这是选项1相关的内容。
</div>

<div id="myDiv2" style="display:none;">
  这是选项2相关的内容。
</div>

JavaScript代码

接下来，我们需要编写一个JavaScript函数，当用户选择一个选项时，会显示相关的DIV。以下是该函数的代码：

function showHideDiv() {
  var selectBox = document.getElementById("mySelect");
  var selectedValue = selectBox.options[selectBox.selectedIndex].value;
  
  var div1 = document.getElementById("myDiv1");
  var div2 = document.getElementById("myDiv2");
  
  if (selectedValue == "option1") {
    div1.style.display = "block";
    div2.style.display = "none";
  } else if (selectedValue == "option2") {
    div1.style.display = "none";
    div2.style.display = "block";
  } else {
    div1.style.display = "none";
    div2.style.display = "none";
  }
}

该函数首先获取下拉列表的选中值，然后显示或隐藏相关的DIV。如果用户选择了“选项1”，则显示“myDiv1”；如果用户选择了“选项2”，则显示“myDiv2”；否则，两个DIV都将隐藏。

总结

在JSP中，使用JavaScript实现下拉显示/隐藏DIV功能非常简单。只需定义一个下拉列表和一些相关的DIV，并在JavaScript中编写相应的函数即可。