Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How can I show a hidden div when a select option is selected in JavaScript?
Showing and hiding elements is a common task in JavaScript. It can be used to create dynamic user interfaces, where the content changes depending on the user's input or interaction with the page. One way of doing this is to show a hidden div when a select option is selected. This article will guide you through how to do this using JavaScript.
A Boolean attribute is the one that was chosen. It indicates that a choice should be preselected when the page loads if it is present. In the drop-down list, the pre-selected option will be shown first.
To show a hidden div when a select option is selected, you can set the value “style.display” to block.
Example
In the following example we are using the visibility property to display and hide the 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>
When the script gets executed, it will generate an output consisting of a drop-down list on the webpage. When the user selects the display option, the div content will get displayed on the browser. The other option was hide, which acts as reverse to the display option.
Example
Considering the following example where we are running script to display hidden 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>
On running the above script, the web-browser displays, the drop-down list. If the user selects "agree," the text "welcome," which is a hidden div, is displayed. Whereas, the other option, "disagree," displays nothing.
Example
Let’s look at the other example where the hidden div is shown as a textbox based on a dropdown list.
<!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>
When the script gets executed, it will generate an output consisting of a drop-down list on the webbrowser. When the user selects the "yes" option, it will generate an input textbox for user input; if he selects "no," it remains unchanged.
15K+ Views
To Continue Learning Please Login