单选下拉框，选中特定的值触发显示后面的div

此代码使用onchange,而不是onclick,onclick是点击立即触发
定义一个JavaScript函数showDiv()，该函数会在下拉框选择发生变化时触发。通过使用document.getElementById()方法获取下拉框和div元素的引用。

然后，根据下拉框的选中值，使用style.display属性来设置div元素的显示/隐藏。当下拉框选中值为"0"时，将display属性设置为"block"以显示div；当下拉框选中值为"1"时，将display属性设置为"none"以隐藏div。

最后，在HTML代码中放置一个下拉框和一个div，并为下拉框添加onchange事件，当下拉框的选中值发生变化时，调用showDiv()函数。

<script>
function showDiv() {
    // 获取下拉框的选中值
    var selectedValue = document.getElementById("mySelect").value;
    
    // 获取要显示/隐藏的div元素
    var divElement = document.getElementById("myDiv");
    
    // 根据选中值设置div的显示/隐藏
    if (selectedValue === "0" || selectedValue === "1") {
        divElement.style.display = "block"; // 显示div
    } else {
        divElement.style.display = "none"; // 隐藏div
    }
}
</script>

<select id="mySelect" onchange="if (this.value !== '') showDiv()">
    <option value="">请选择</option>
    <option value="0">选项1</option>
    <option value="1">选项2</option>
</select>

<div id="myDiv" style="display: none;">
    这是要显示/隐藏的内容
</div>

还有一种实现方式显得更优雅：

<style>
.hidden-div {
  visibility: hidden;
}
</style>

<div id="myDiv" class="hidden-div">
  <p>这是隐藏的 div 元素</p>
  <input type="text" value="隐藏元素">
</div>

<script>
var myDiv = document.getElementById("myDiv");
myDiv.classList.remove("hidden-div");

// 获取隐藏的输入框的值
var input = myDiv.querySelector("input");
console.log(input.value);
</script>

我们首先定义了一个 CSS 类 .hidden-div，并将其应用到

元素中。该类使用 visibility: hidden; 将元素隐藏起来。

然后，通过 JavaScript 中的 classList.remove() 方法，从

元素中移除了 .hidden-div 类，使其显示出来。

最后，使用 querySelector() 方法来获取隐藏的

中的 元素，并通过 value 属性获取其值。

通过这种方式，可以将

元素进行隐藏，但 仍然能够访问其中的子元素及其属性。
如果引入了jQuery库，获取select单选框的值更方便：

var selectedValue = $("#mySelect").val();//value
var selectedtext = $("#mySelect option:selected").text();