skip to Main Content

I was trying to display a div and hide other div when the select element hold the corresponding value.

I created a select element with 4 options, the default with empty value plus three others, lower, upper, higher. I placed three hidden div elements below containing the content for each of the 3 options: lower, upper and higher. I wanted to show and hide each div based on the values of the select element. Here is my code:

const departments = document.querySelector("#departments");
const lowerdep = document.querySelector(".lower-dep");
const upperdep = document.querySelector(".upper-dep");
const higherdep = document.querySelector(".higher-dep");

if (departments.value = "") {
  lowerdep.style.display = "none";
  upperdep.style.display = "none";
  higherdep.style.display = "none";

} else if (departments.value = "lower") {
  lowerdep.style.display = "block";

} else if (departments.value = "upper") {
  upperdep.style.display = "block";

} else {
  higherdep.style.display = "block";
}
.lower-dep,
.upper-dep,
.higher-dep {
  display: none;
}
<div class="">
  <div class="">
    <label class="">Department
                <select id="departments" name="departments">
                  <option value="" selected>Select Department...</option>
                  <option value="lower">Lower</option>
                  <option value="upper">Upper</option>
                  <option value="higher">Higher</option>
                </select>
              </label>
  </div>
</div>

<div class="lower-dep">
  <div class="input-check">
    <input type="checkbox" id="color1" name="color1" value="Red">
    <label for="color1"> Red</label>
  </div>
</div>

<div class="upper-dep">
  <div class="input-check">
    <input type="checkbox" id="color1" name="color1" value="Red">
    <label for="color1"> Red</label>
  </div>
</div>

<div class="higher-dep">
  <div class="input-check">
    <input type="checkbox" id="color1" name="color1" value="Red">
    <label for="color1"> Red</label>
  </div>
</div>

2

Answers


  1. You’ll want to wrap that in an event listener, and hide all of the elements before showing:

    departments.addEventListener("change", function() {
        lowerdep.style.display = "none";
        upperdep.style.display = "none";
        higherdep.style.display = "none";
        
        if (departments.value == "lower") {
          lowerdep.style.display = "block";
        } else if (departments.value == "upper") {
          upperdep.style.display = "block";
        } else if (departments.value == "higher") {
          higherdep.style.display = "block";
        }
    });
    

    This way whenever the user picks an option the corresponding div will be shown, and the rest will be hidden.

    Also, you will want to replace each = with == in the if statements, as = in javascript is assignment, so the if statement will run if the value you assign is truthy. You were probably looking for ==, the equality comparison operator instead.

    Full snippet:

    const departments = document.querySelector("#departments");
    const lowerdep = document.querySelector(".lower-dep");
    const upperdep = document.querySelector(".upper-dep");
    const higherdep = document.querySelector(".higher-dep");
    departments.addEventListener("change", function() {
        lowerdep.style.display = "none";
        upperdep.style.display = "none";
        higherdep.style.display = "none";
        
        if (departments.value == "lower") {
          lowerdep.style.display = "block";
        } else if (departments.value == "upper") {
          upperdep.style.display = "block";
        } else if (departments.value == "higher") {
          higherdep.style.display = "block";
        }
    });
    .lower-dep,
    .upper-dep,
    .higher-dep {
      display: none;
    }
    <div class="">
      <div class="">
        <label class="">Department
                    <select id="departments" name="departments">
                      <option value="" selected>Select Department...</option>
                      <option value="lower">Lower</option>
                      <option value="upper">Upper</option>
                      <option value="higher">Higher</option>
                    </select>
                  </label>
      </div>
    </div>
    
    <div class="lower-dep">
      <div class="input-check">
        <input type="checkbox" id="color1" name="color1" value="Red">
        <label for="color1"> Lower dep: Red</label>
      </div>
    </div>
    
    <div class="upper-dep">
      <div class="input-check">
        <input type="checkbox" id="color1" name="color1" value="Red">
        <label for="color1"> Upper dep: Red</label>
      </div>
    </div>
    
    <div class="higher-dep">
      <div class="input-check">
        <input type="checkbox" id="color1" name="color1" value="Red">
        <label for="color1"> Higher dep: Red</label>
      </div>
    </div>
    Login or Signup to reply.
    1. Ids are unique, you can’t have multiple elements with the same id so I changed that.
    2. Also added an eventListener to hide and show elements based on selection and just remove or add the d-none class as needed.
    3. Your if/else statements were also wrong = is for assignment and == for comparisons. You can also use switch case like in my example.
    const departments = document.querySelector("#departments");
    const lowerdep = document.querySelector(".lower-dep");
    const upperdep = document.querySelector(".upper-dep");
    const higherdep = document.querySelector(".higher-dep");
    
    departments.addEventListener("change", function(){
      lowerdep.classList.add("d-none");
      upperdep.classList.add("d-none");
      higherdep.classList.add("d-none");
      switch (departments.value) {
        case 'lower':
            lowerdep.classList.remove("d-none");
        break;
        case 'upper':
            upperdep.classList.remove("d-none");
        break;
        case 'higher':
            higherdep.classList.remove("d-none");
        break;
      }
    })
    .d-none {
      display: none;
    }
    <div class="">
        <div class="">
          <label class="">Department
            <select id="departments" name="departments">
              <option value="" selected>Select Department...</option>
              <option value="lower">Lower</option>
              <option value="upper">Upper</option>
              <option value="higher">Higher</option>
            </select>
          </label>
        </div>
      </div>
    
      <div class="lower-dep d-none">
        <div class="input-check">
          <input type="checkbox" id="color-lower" name="color" value="Red">
          <label for="color-lower"> Red lower</label>
        </div>
      </div>
    
      <div class="upper-dep d-none">
        <div class="input-check">
          <input type="checkbox" id="color-upper" name="color" value="Red">
          <label for="color-upper"> Red upper</label>
        </div>
      </div>
    
      <div class="higher-dep d-none">
        <div class="input-check">
          <input type="checkbox" id="color-higher" name="color1" value="Red">
          <label for="color-higher"> Red higher</label>
        </div>
      </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search