Để hiển thị một div ẩn khi một tùy chọn được chọn được chọn, bạn có thể đặt giá trị “style.display” để chặn.
Ví dụ
Sau đây là mã -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#hideValuesOnSelect {
display: none;
}
</style>
<body>
<select onchange="displayDivDemo('hideValuesOnSelect', this)">
<option value="0">Java</option>
<option value="1">Javascript</option>
</select>
<div id="hideValuesOnSelect">This is the Javascript</div>
</body>
<script>
function displayDivDemo(id, elementValue) {
document.getElementById(id).style.display = elementValue.value == 1 ? 'block' : 'none';
}
</script>
</html> Để chạy chương trình trên, hãy lưu tên tệp anyName.html (index.html) và nhấp chuột phải vào tệp. Chọn tùy chọn “Mở bằng máy chủ trực tiếp” trong trình chỉnh sửa Mã VS.
Điều này sẽ tạo ra kết quả sau -
Bất cứ khi nào bạn chọn giá trị tùy chọn thứ hai (JavaScript), div ẩn sẽ hiển thị.
Đầu ra
Điều này sẽ tạo ra kết quả sau -
