搜尋

首頁  >  問答  >  主體

使用 JavaScript 和 CSS 根據選擇元素值顯示 div

當選擇元素保存相應的值時,我試圖顯示一個div並隱藏其他div。

我建立了一個包含 4 個選項的選擇元素,預設值為空值,另外三個選項為:下、上、上。我在下面放置了三個隱藏的 div 元素,其中包含 3 個選項中每個選項的內容:下、上和上。我想根據選擇元素的值顯示和隱藏每個 div。這是我的程式碼:

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>

P粉286046715P粉286046715451 天前505

全部回覆(2)我來回復

  • P粉032649413

    P粉0326494132023-09-07 12:45:40

    1. ID 是唯一的,多個元素不能具有相同的 ID,因此我對此進行了更改。
    2. 也新增了一個 eventListener 來根據選擇隱藏和顯示元素,並根據需要刪除或新增 d-none 類別。
    3. 您的 if/else 語句也是錯誤的,= 用來賦值,== 用來比較。您也可以像我的範例一樣使用 switch case

    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>

    回覆
    0
  • P粉254077747

    P粉2540777472023-09-07 09:07:08

    您需要將其包裝在事件偵聽器中,並在顯示之前隱藏所有元素:

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

    這樣,每當使用者選擇選項時,就會顯示對應的 div,而其餘部分將被隱藏。

    此外,您還需要將if 語句中的每個= 替換為==,因為javascript 中的= 是賦值,因此如果您指派的值是真值,則if 語句將會執行。您可能正在尋找 ==,即相等比較運算子。

    完整片段:

    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>

    回覆
    0
  • 取消回覆