Javascript Show Hide Div on Select Option

Javascript Show Hide Div on Select Option Example; In this tutorial you will learn how to show or hide a Div when a Select option is Selected using JavaScript.

In Js to show a div element when a select option is selected, we can use the onchange event and set the div’s display property to block.

HTML Code:

Here is the HTML part:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="//">
  <script src=""></script>
  <script src=""></script>
     #box {
        display: none;
    <select onchange="toggleDiv()">
      <option value="0">Select Option</option>
      <option value="1">Javascript</option>
    <div id="box">This is the Javascript</div>

Javascript Code: here is the related JavaScript code

   function toggleDiv(e) {
        const box = document.getElementById('box'); = == 1 ? 'block' : 'none';

Hope this example help you.