How To Show A Div When A Select Option Is Selected Using JavaScript

The topic of this article will be about how to show a div when a select option is selected using JavaScript in some ways, for example, using the display: block or visibility: visible method.

Show a div when a select option is selected using JavaScript

Using display: block method

This is an element with the display property set to block starting on a new line and taking up the available screen width. You can specify width and height attributes for such elements. And the opposite of it, we have the display: none property to hide the element so we can set up a hidden div. Next, we will have a selection with two options, show and hide, with two different values ​​of 1 and 0 for easy identification.

Code:

<h2>Show a Div when a Select option is Selected using JavaScript | LearnShareIT</h2>
    <hr/>
<select id="select" name="changeVisible" onchange="handleDiv('div', this)">
    <option value="0">Hidden</option>
    <option value ="1" >Show</option>
</select>
    <br/>
    <br/>
    <div id="div"></div>
<script>
        function handleDiv(divId, element) {
        	const hiddenDiv = document.getElementById(divId)
        	hiddenDiv.style.display = element.value == 1 ? 'block' : 'none';
        }
</script>

#div {
    display: none;
    width: 100px;
    height: 100px;
    background-color: green;
}

Output:

We will use the onChange event for the select tag to catch its selected value change event. When we switch to 0, we will set the div’s display to none. Otherwise, we will change the display of the div tag to be made into a block for it to appear.

Using visibility: visible method

The visibility property determines whether the element is visible or not, and when we leave the value visibility: visible, it means it will be made visible.

And to hide or show a div, we need to have a value pair to do this in the css. In this case, we use the visible and hidden pair. As you can see from the first, we will apply both css and javascript to change the attribute of the div.

Code:

<h2>Show a Div when a Select option is Selected using JavaScript | LearnShareIT</h2>
   <hr/>
<select id="select" name="changeVisible" onchange="showDiv('div', this)">
   <option value="0">Hidden</option>
   <option value ="1" >Show</option>
</select>
   <br/>
   <br/>
   <div id="div"></div>
<script>
        function showDiv(divId, element) {
        	document.getElementById(divId).style.visibility = element.value == 1 ? 'visible' : 'hidden';
        }
</script>

#div {
    visibility: hidden;
    width: 100px;
    height: 100px;
    background-color: green;
}

Because we only change the pair of values ​​to hide and show the div, the output here will return the same, but there will be a difference with display and visibility. That is, when we use display: none, the program will not leave space for the hidden div tag, and visibility is there. So be careful when using either method.

Summary

Through the article, you have learned how to show a div when a select option is selected using JavaScript in two different ways. However, you should use the display: block method in combination with display: none because it will avoid problems with layout.

Maybe you are interested:

• Show/Hide an element on Radio button Selection using JS
• Show a `hidden` Div on Hover using JavaScript
• Show/hide a div element by id using javascript

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs