To show a hidden div when a select option is selected, you can set the value “style.display” to block.
Example
Following is the code −
<!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>To run the above program, save the file name anyName.html(index.html) and right click on the file. Select the option “Open with live server” in VS Code editor.
This will produce the following output −
Whenever you select the second option value (JavaScript), the hidden div will show.
Output
This will produce the following output −
