資料結構
網路
關係資料庫管理系統 (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+ 瀏覽量
廣告