如何根據 html 中選擇的選項切換 div 的可見性

Question

我正在使用 Bootstrap 4 和 Vanilla Javascript。 我想根據 html 中<option>標簽上<option>的選項顯示和隱藏某些 div。 這是我的 HTML 示例..

<div class="form-group"> 
                            <label for="Category ">Select Category</label>
                            <select class="form-control" id="category"  onchange="selectCategory()">
                                <option></option>
                                <optgroup label="Vehicles">
                                    <option>Sell Vehicle</option>
                                    <option>Rent Vehicle</option>
                                </optgroup>
                            <option>Home Appliances</option>
                            <option>Clothes and Materials</option>
</div>
<div class="form-group hidden" id="sellVehicle">
<p> Lorem Ipsum... <p>
</div>
<div class="form-group hidden" id="homeAppliances">
<p> Lorem Ipsum... <p>
</div>

這是我為 CSS 提供的內容...

.hidden{
    display:none;
}

這是我的javascript代碼...

function selectCategory(){
  var category = document.getElementById('category');
  var selectedCategory=category.options[category.selectedIndex].text;
  switch(selectedCategory) {
      case "Sell Vehicle":
           document.getElementById("sellVehicle").classList.remove("hidden");
        break;
      case "Home Appliances":
            document.getElementById("homeAppliances").classList.remove("hidden");
        break;
    }
}

現在，問題是當其他選項被選中時，最初顯示的 div 不會被隱藏。 任何修復？ Vanilla JS 解決方案將是最受青睞的。

Answer 1

您正在從所需元素中刪除hidden類，但未將其添加回其兄弟元素。 這是您想要的工作代碼：

 function selectCategory() { var category = document.getElementById('category'); var selectedCategory = category.options[category.selectedIndex].text; let element; switch (selectedCategory) { case "Sell Vehicle": element = document.getElementById("sellVehicle"); element.classList.remove("hidden"); element.nextElementSibling.classList.add("hidden"); break; case "Home Appliances": element = document.getElementById("homeAppliances"); element.classList.remove("hidden"); element.previousElementSibling.classList.add("hidden"); break; } }

 .hidden { display: none; }

 <div class="form-group"> <label for="Category ">Select Category</label> <select class="form-control" id="category" onchange="selectCategory()"> <option selected disabled>Choose</option> <optgroup label="Vehicles"> <option>Sell Vehicle</option> <option>Rent Vehicle</option> </optgroup> <option>Home Appliances</option> <option>Clothes and Materials</option> </select> </div> <div class="form-group hidden" id="sellVehicle"> <p> sellvehicle <p> </div> <div class="form-group hidden" id="homeAppliances"> <p> homeappliaces <p> </div>

Answer 2

最小 JS 版本 ( https://codepen.io/sodapop/pen/yLObGex ) 提供與要定位的元素 ID 相同的選擇選項值：

// main.js
// cache selected value
let selected = ''

const toggleDisplay = (id, action = 'add') =>  document.getElementById(id).classList[action]("hidden");

// Get event object
function selectCategory({ target }) {
  // Check if there's a selected element and hide it
  if(selected && selected !== target.value) toggleDisplay(selected)
  // Set selected to latest element
  selected = target.value
  // remove 'hidden' class from selected
  return toggleDisplay(target.value, 'remove')
}

HTML：

<div class="form-group">
  <label for="Category ">Select Category</label>
  <select 
       class="form-control" 
       id="category" 
       <!-- Pass event into selectCategory -->
       onchange="selectCategory(event)">
    <option></option>
    <optgroup label="Vehicles">
      <!-- Added value -->
      <option value="sellVehicle">Sell Vehicle</option>
      <!-- Added value -->
      <option value="homeAppliances">Rent Vehicle</option>
    </optgroup>
    <option>Home Appliances</option>
    <option>Clothes and Materials</option>
  </select>
</div>
<div class="form-group hidden" id="sellVehicle">
  <p> Vehicle... </p>
</div>
<div class="form-group hidden" id="homeAppliances">
  <p> Appliances... </p>
</div>

CSS：

.hidden{
    display:none;
}

Answer 3

如果我理解正確，您也可以設置其他 div。 如果您在談論 Select Category div，那么只需給它一個 ID，然后相應地設置隱藏的類。 例如

   <div class="form-group" id="CategoryDiv"> 
                        <label for="Category ">Select Category</label>
                        <select class="form-control" id="category"  onchange="selectCategory()">
                            <option></option>
                            <optgroup label="Vehicles">
                                <option>Sell Vehicle</option>
                                <option>Rent Vehicle</option>
                            </optgroup>
                        <option>Home Appliances</option>
                        <option>Clothes and Materials</option>

   case "Sell Vehicle":
      
       document.getElementById("sellVehicle").classList.remove("hidden");
       document.getElementById("homeAppliances").classList.add("form-group");
    break;
  case "Home Appliances":
        
        document.getElementById("homeAppliances").classList.remove("hidden");
        document.getElementById("sellVehicle").classList.add("form-group");
    break;