数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何在JavaScript中选择下拉选项后显示隐藏的div？
显示和隐藏元素是JavaScript中的常见任务。它可以用于创建动态用户界面，其中内容根据用户的输入或与页面的交互而变化。一种方法是在选择下拉选项后显示隐藏的div。本文将指导您如何使用JavaScript执行此操作。
布尔属性是选择的属性。如果存在，它表示页面加载时应预选一个选项。在下拉列表中，预选的选项将首先显示。
要选择下拉选项后显示隐藏的div，您可以将“style.display”的值设置为“block”。
示例
在下面的示例中，我们使用可见性属性来显示和隐藏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>
脚本执行后，它将在网页浏览器上生成一个下拉列表。如果用户选择“是”选项，它将生成一个输入文本框供用户输入；如果选择“否”，则保持不变。
更新于：2023年1月18日
17K+ 浏览量
广告