Javascript 如何根据在html中选择的选项切换div的可见性

我正在使用Bootstrap4和Vanilla Javascript。我想根据html中

标记上选择的选项显示和隐藏某些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>

这是我的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解决方案将是首选。

您正在从所需元素中删除

隐藏的

类，但不将其添加回其同级。以下是您想要的工作代码：

function selectCategory（）{
var category=document.getElementById（'category'）；
var selectedCategory=category.options[category.selectedIndex].text；
let元素；
开关（已选择类别）{
案例“出售车辆”：
元素=document.getElementById（“sellVehicle”）；
元素.classList.remove（“隐藏”）；
element.nextElementSibling.classList.add（“隐藏”）；
打破
案例“家用电器”：
元素=document.getElementById（“家用电器”）；
元素.classList.remove（“隐藏”）；
元素.previousElementSibling.classList.add（“隐藏”）；
打破
}
}

。隐藏{
显示：无；
}

选择类别
选择
卖车
租车
家用电器
衣料
销售车辆

家庭苹果

如果我理解正确，您也可以设置其他div。如果您谈论的是selectcategory div，那么只需给它一个ID，然后相应地设置隐藏的类。e、 g

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

最小JS版本（），该版本提供与目标元素ID相同的select选项值：

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

---

非常感谢你，伙计。它完全按照要求工作

   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;

// 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')
}

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

.hidden{
    display:none;
}