How to Show/Hide a Div Based on Selected Option Value of a Select Using JavaScript ?

Last Updated : 14 Feb, 2024

We are going to discuss how can we show/hide a div based on a selected option value. Select is one of the input type tags. It is used in HTML to get input from one of the options given below. Not only are we able to get select input (optional input), but we can also make dynamic changes to the website according to user user-selected Options. Let’s see how we can show/hide divs concerning the user-given select input for three boxes created with div.

Approach

Create 3 files for HTML (index.html), CSS (style.css), and JS ( Javascript).
Create three select tags with options hide and show and create div blocks for each selects inside a container div.
Add styles to the structure. Add a function in onchange attribute of select which gets called whenever an option is changed.
Define the function inside the javascript part.
Access the value of all three select tags in the Javascript and make visibility style changes to the respective divs with if/else conditions.

Syntax:

<label for="selectLabel">Select an option:</label>
    <select>
        <option value="option1">Option 1</option>
        <!--    .....more options..........   -->
   </select>

Example: This example shows the implementation of the above-explained approach.

Javascript

function toggleDiv() {
    let value1 = document.getElementById("select1").value;
    let value2 = document.getElementById("select2").value;
    let value3 = document.getElementById("select3").value;
    let div1 = document.getElementById("one");
    let div2 = document.getElementById("two");
    let div3 = document.getElementById("three");
 
    if (value1 === "show") {
        div1.style.visibility = "visible";
    }
    else {
        div1.style.visibility = "hidden";
    }
 
    if (value2 === "show") {
        div2.style.visibility = "visible";
    }
    else {
        div2.style.visibility = "hidden";
    }
 
    if (value3 === "show") {
        div3.style.visibility = "visible";
    }
    else {
        div3.style.visibility = "hidden";
    }
 
}

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Show/Hide Div based on Select Option</title>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <div class="inputs">
        <div class="input">
            <label for="selectLabel">Div-1: </label>
            <select id="select1" onchange="toggleDiv()">
                <option value="show">Show</option>
                <option value="hide">Hide</option>
            </select>
        </div>
 
        <div class="input">
            <label for="selectLabel">Div-2: </label>
            <select id="select2" onchange="toggleDiv()">
                <option value="show">Show</option>
                <option value="hide">Hide</option>
            </select>
        </div>
 
        <div class="input">
            <label for="selectLabel">Div-3: </label>
            <select id="select3" onchange="toggleDiv()">
                <option value="show">Show</option>
                <option value="hide">Hide</option>
            </select>
        </div>
 
    </div>
 
    <div class="container">
        <div id="one" class="box">
            <p>This is visible when show in div 1</p>
        </div>
 
        <div id="two" class="box">
            <p>This is visible when show in div 2</p>
        </div>
 
        <div id="three" class="box">
            <p>This is visible when show in div 3</p>
        </div>
    </div>
 
    <script src="script.js"></script>
 
</body>
 
</html>

CSS

* {
    padding: 0;
    margin: 0;
}
 
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    font-size: 1.3rem;
}
 
.inputs {
    display: flex;
    gap: 2rem;
}
 
.container {
    display: flex;
    gap: 2rem;
}
 
.box {
    background: green;
    color: #fff;
    padding: 3rem;
}
 
#two {
    background-color: blue;
}
 
#three {
    background-color: red;
}
 
select option {
    display: block;
    font-size: 1.2rem;
    color: green;
}
 
select {
    padding: .7rem 1.5rem;
    font-size: 1.2rem;
    color: green;
}