php下拉时触发显示隐藏内容,JavaScript实现下拉菜单的显示和隐藏

好的，下面是实现下拉菜单的 JavaScript 代码：

<!-- HTML代码 -->
<select onchange="showContent()">
  <option value="">请选择</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<div id="content1" style="display:none;">
  内容1
</div>

<div id="content2" style="display:none;">
  内容2
</div>

<div id="content3" style="display:none;">
  内容3
</div>

// JavaScript代码
function showContent() {
  var select = document.getElementsByTagName("select")[0];
  var selectedValue = select.options[select.selectedIndex].value;

  for (var i = 1; i <= 3; i++) {
    var content = document.getElementById("content" + i);
    if (i == selectedValue) {
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
  }
}

解释一下代码：

- HTML 中的 `select` 标签是下拉菜单，当选项发生变化时，会触发 `showContent()` 函数。
- `showContent()` 函数首先获取当前选中的选项的值。
- 然后遍历 `id` 为 `content1`、`content2`、`content3` 的三个 `div`，如果当前遍历到的 `div` 的下标等于选中的选项的值，就将其显示，否则就将其隐藏。