Borislav Hadzhiev
Last updated: Jan 6, 2022
Check out my new book
To show a div element when a select option is selected:
change
event listener to the select element.display
property to block
.Here is the HTML for the examples in this article.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <style> #box { display: none; background-color: salmon; color: white; width: 100px; height: 100px; } </style> <body> <label for="select">Choose an Option:</label> <select name="select" id="select"> <option value="hide">Hide</option> <option value="show">Show</option> </select> <div id="box">Box content</div> <script src="index.js"></script> </body> </html>
And here is the related JavaScript code.
const el = document.getElementById('select'); const box = document.getElementById('box'); el.addEventListener('change', function handleChange(event) { if (event.target.value === 'show') { box.style.display = 'block'; } else { box.style.display = 'none'; } });
We added a change event listener to the select element.
handleChange
function is invoked.We used the
target property
on the event
object. The target
property is a reference to the object
(element) on which the event was dispatched.
In the example, the event.target
property refers to the select box.
To determine if the div
should be shown or hidden, we check if the value
of
the select element is set to a specific value and set the element's display
property accordingly.
If you load the page and change the selected value to show
, you will see the
div
element appear.
If you then change the element's value back to hide
, the div
is hidden
again.
We used the display property in the examples, however you might need to use the visibility property depending on your use case.
display
property is set to none
, the element is removed from the DOM and has no effect on the layout. The document is rendered as though the element does not exist.On the other hand, when an element's visibility
property is set to hidden
,
it still takes up space on the page, however the element is invisible (not
drawn). It still affects the layout on your page as normal.
Here is an example that uses the visibility
property to show and hide the
div
when a specific option is selected.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <style> #box { visibility: hidden; background-color: salmon; color: white; width: 100px; height: 100px; } </style> <body> <label for="select">Choose an Option:</label> <select name="select" id="select"> <option value="hide">Hide</option> <option value="show">Show</option> </select> <div id="box">Box content</div> <div>More content here</div> <script src="index.js"></script> </body> </html>
And here is the related JavaScript code.
const el = document.getElementById('select'); const box = document.getElementById('box'); el.addEventListener('change', function handleChange(event) { if (event.target.value === 'show') { box.style.visibility = 'visible'; } else { box.style.visibility = 'hidden'; } });
If you load the page, you'll see that the div
still takes up space on the
page, even though it is hidden.
We used the visibility
property to hide the div
initially, so the element is
not rendered, but still affects the layout on the page as normal.
Had we used the display
property, the element would be taken out of the DOM
and other elements would take its place.