Displaying a div based on select element value with JavaScript and CSS

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:

         <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>

       From my css file:
       .lower-dep, .upper-dep, .higher-dep {
        display: none;
        }

          
  <script>
    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";
    }

  </script>