极客教程JavaScript 如何在选择选项时显示一个隐藏的div
显示和隐藏元素是JavaScript中的一项常见任务。它可以用来创建动态的用户界面，其中的内容会根据用户的输入或与页面的互动而改变。做到这一点的一个方法是，当选择一个选项时，显示一个隐藏的div。本文将指导你如何使用JavaScript来实现这一点。
一个布尔属性就是被选择的那个。它表示当页面加载时，如果有一个选择存在，就应该被预选。在下拉列表中，预选的选项将被首先显示。
要在选择选项时显示一个隐藏的div，你可以将 “style.display “的值设置为block。
示例
在下面的例子中，我们使用visibility属性来显示和隐藏这个div。
<!DOCTYPE html>
<html>
<style>
#tutorial {
visibility: hidden;
background-color: #76D7C4 ;
color: black;
width: 100px;
height: 100px;
}
</style>
<body>
<label for="select">Select:</label>
<select name="select" id="select">
<option value="hide">Hide</option>
<option value="show">display</option>
</select>
<div id="tutorial">Tutorialspoint</div>
<script>
const el = document.getElementById('select');
const box = document.getElementById('tutorial');
el.addEventListener('change', function handleChange(event) {
if (event.target.value === 'show') {
box.style.visibility = 'visible';
} else {
box.style.visibility = 'hidden';
}
});
</script>
</body>
</html>
当该脚本被执行时，它将在网页上生成一个由下拉列表组成的输出。当用户选择显示选项时，div的内容将被显示在浏览器上。另一个选项是隐藏，它的作用与显示选项相反。
示例
考虑到下面的例子，我们正在运行脚本来显示隐藏的div。
<!DOCTYPE html>
<html>
<style>
#hidden_div {
display: none;
}
</style>
<body>
<label for="select">Choose:</label>
<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">DisAgree</option>
<option value="1">Agree</option>
</select>
<div id="hidden_div">Welcome</div>
<script>
function showDiv(divId, element) {
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}
</script>
</body>
</html>
在运行上述脚本时，网络浏览器显示下拉列表。如果用户选择了 “同意”，就会显示 “欢迎 “这个文本，这是一个隐藏的div。而另一个选项 “不同意 “则不显示。
示例
让我们看看另一个例子，在这个例子中，隐藏的div被显示为一个基于下拉列表的文本框。
<!DOCTYPE html>
<html>
<body>
<script>
function Div() {
var Passport1 = document.getElementById("passport");
var dvPassport = document.getElementById("tutorial");
tutorial.style.display = Passport.value == "Yes" ? "block" : "none";
}
</script>
<span>Do you have Passport?</span>
<select id = "Passport" onchange = "Div()">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<div id="tutorial" style="display: none">
Passport Number:
<input type="text" id="txtPassportNumber" />
</div>
</body>
</html>
当该脚本被执行时，它将在网页浏览器上生成一个由下拉列表组成的输出。当用户选择 “是 “选项时，它将生成一个输入文本框供用户输入；如果他选择 “否”，则保持不变。