如何在 JavaScript 中选择选择选项时显示隐藏的 div?
javascriptweb developmentfront end technology
显示和隐藏元素是 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>
运行上述脚本后，Web 浏览器将显示下拉列表。如果用户选择"同意"，则会显示文本"欢迎"，这是一个隐藏的 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>
当脚本执行时，它将生成一个由 Web 浏览器上的下拉列表组成的输出。当用户选择"是"选项时，它将生成一个输入文本框供用户输入；如果用户选择"否"，则保持不变。
