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

Below is the full implementation of how to show/hide a div based on the selected option value of a select using JavaScript:

1. HTML (index.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</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <label for="select1">Select for Box 1:</label>
        <select id="select1" onchange="toggleDiv()">
            <option value="hide">Hide</option>
            <option value="show">Show</option>
        </select>

        <label for="select2">Select for Box 2:</label>
        <select id="select2" onchange="toggleDiv()">
            <option value="hide">Hide</option>
            <option value="show">Show</option>
        </select>

        <label for="select3">Select for Box 3:</label>
        <select id="select3" onchange="toggleDiv()">
            <option value="hide">Hide</option>
            <option value="show">Show</option>
        </select>

        <div id="one" class="box">Box 1</div>
        <div id="two" class="box">Box 2</div>
        <div id="three" class="box">Box 3</div>
    </div>

    <script src="script.js"></script>
</body>
</html>

2. CSS (style.css)

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

.container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

label {
    font-weight: bold;
    margin-bottom: 5px;
}

select {
    margin-bottom: 10px;
    padding: 5px;
    width: 150px;
}

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    border: 1px solid #000;
    text-align: center;
    line-height: 100px;
    visibility: hidden; /* Default: hidden */
}

3. JavaScript (script.js)

function toggleDiv() {
    // Get the selected values
    let value1 = document.getElementById("select1").value;
    let value2 = document.getElementById("select2").value;
    let value3 = document.getElementById("select3").value;

    // Get the div elements
    let div1 = document.getElementById("one");
    let div2 = document.getElementById("two");
    let div3 = document.getElementById("three");

    // Toggle visibility for Box 1
    if (value1 === "show") {
        div1.style.visibility = "visible";
    } else {
        div1.style.visibility = "hidden";
    }

    // Toggle visibility for Box 2
    if (value2 === "show") {
        div2.style.visibility = "visible";
    } else {
        div2.style.visibility = "hidden";
    }

    // Toggle visibility for Box 3
    if (value3 === "show") {
        div3.style.visibility = "visible";
    } else {
        div3.style.visibility = "hidden";
    }
}

How It Works

HTML: Contains three select elements corresponding to three div elements. Each select has two options: show and hide.
CSS: The div elements (boxes) are styled with default visibility: hidden to make them invisible initially.
JavaScript:
- The onchange attribute of each select triggers the toggleDiv function.
- The function checks the value of each select and toggles the visibility style of the corresponding div.