How can I show a hidden div when a select option is selected in JavaScript?

JavascriptWeb DevelopmentFront End TechnologyObject Oriented Programming

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 −

raja
Published on 26-Oct-2020 15:16:32
Advertisements