如何制作具有所需属性的两级选择选项类别和子类别？

Question

如何制作两级SELECT OPTION类别和子类别 - 必须要求所有级别

<select id="category" required>
    <option value="">select model type</option>
    <option class="Volvo" value="1">Volvo</option>
    <option class="Saab" value="2">Saab</option>
    <option class="Opel" value="3">Opel</option>
    <option class="Audi" value="4">Audi</option>
</select> 


 <select id="subcategory" required>
  <optgroup class="Volvo">
    <option value="">select model type</option>
    <option value="44">XC60</option>
    <option value="55">XC90</option>
  </optgroup>
  <optgroup class="Saab">
    <option value="">select model type</option>
    <option value="66">Saab 9XX</option>
    <option value="77">Saab Aero-X</option>
  </optgroup>
  <optgroup class="Opel">
    <option value="">select model type</option>
    <option value="88">Corsa A</option>
    <option value="99">Corsa B</option>
  </optgroup>
  <optgroup class="Audi">
    <option value="">select model type</option>
    <option value="616">Audi A4</option>
    <option value="717">Audi A8</option>
  </optgroup>
</select> 

我需要像这样的东西

使用javascript还是jquery？

我现在不知道如何工作javascript，我需要帮助谢谢

Answer 1

这是一个计划香草JS方法。显示红色验证的神奇之处在于Javascript和CSS的结合。

1. 首先按document.getElementById()获取DOM元素的值。

2. 获取<option>代码的值。

3. 检查.value标记的<option>是否不是默认标记。

4. 如果是，则将CSS类添加到显示必需文本的<label>，并添加CSS类以向<option>添加边框标签

5. 如果它不是默认值，则从<label>和<option>

中删除CSS类

var categoryChanged = function() {
  var category = document.getElementById('category');
  var subcategory = document.getElementById('subcategory');
  var option = category[category.selectedIndex].value;
  switch (option) {
    case "1":
      subcategory.children[0].style.display = "block";
      subcategory.children[1].style.display = "none";
      subcategory.children[2].style.display = "none";
      subcategory.children[3].style.display = "none";
      break;
    case "2":
      subcategory.children[0].style.display = "none";
      subcategory.children[1].style.display = "block";
      subcategory.children[2].style.display = "none";
      subcategory.children[3].style.display = "none";
      break;
    case "3":
      subcategory.children[0].style.display = "none";
      subcategory.children[1].style.display = "none";
      subcategory.children[2].style.display = "block";
      subcategory.children[3].style.display = "none";
      break;
    case "4":
      subcategory.children[0].style.display = "none";
      subcategory.children[1].style.display = "none";
      subcategory.children[2].style.display = "none";
      subcategory.children[3].style.display = "block";
      break;
  }
}

var validateCategories = function() {
  // Step 1
  var category = document.getElementById('category');
  var subcategory = document.getElementById('subcategory');
  var categoryLabel = document.getElementById('categoryLabel');
  var subcategoryLabel = document.getElementById('subcategoryLabel');
  // Step 2
  var categoryText = category[category.selectedIndex].text; // Don't need this, only shown to show you how to get the text
  var categoryValue = category[category.selectedIndex].value;
  var subcategoryText = subcategory[subcategory.selectedIndex].text; // Don't need this, only shown to show you how to get the text
  var subcategoryValue = subcategory[subcategory.selectedIndex].value;

  // Step 3 for category <option>
  if (categoryValue === "") {
    // Step 4 for category <option>
    category.classList.add('not-valid');
    categoryLabel.classList.remove('validated-label');
    categoryLabel.classList.add('required-label');
  } else {
    // Step 5 for category <option>
    category.classList.remove('not-valid');
    categoryLabel.classList.remove('required-label');
    categoryLabel.classList.add('validated-label');
  }
  // Step 3 for subcategory <option>
  if (subcategoryValue === "") {
    // Step 4 for subcategory <option>
    subcategory.classList.add('not-valid');
    subcategoryLabel.classList.remove('validated-label');
    subcategoryLabel.classList.add('required-label');
  } else {
    // Step 5 for subcategory <option>
    subcategory.classList.remove('not-valid');
    subcategoryLabel.classList.remove('required-label');
    subcategoryLabel.classList.add('validated-label');
  }
};

.not-valid {
  border: 5px solid red;
}

.validated-label {
  display: none;
}

.required-label {
  color: red;
  display: visible;
}

<label for="category" id="categoryLabel" class="validated-label">Required</label>
<select id="category" onchange="categoryChanged()" required>
    <option value="">select model type</option>
    <option class="Volvo" value="1">Volvo</option>
    <option class="Saab" value="2">Saab</option>
    <option class="Opel" value="3">Opel</option>
    <option class="Audi" value="4">Audi</option>
</select>

<label for="subcategory" id="subcategoryLabel" class="validated-label">Required</label>
<select id="subcategory" required>
  <optgroup class="Volvo" hidden>
    <option value="">select model type</option>
    <option value="44">XC60</option>
    <option value="55">XC90</option>
  </optgroup>
  <optgroup class="Saab" hidden>
    <option value="">select model type</option>
    <option value="66">Saab 9XX</option>
    <option value="77">Saab Aero-X</option>
  </optgroup>
  <optgroup class="Opel" hidden>
    <option value="">select model type</option>
    <option value="88">Corsa A</option>
    <option value="99">Corsa B</option>
  </optgroup>
  <optgroup class="Audi" hidden>
    <option value="">select model type</option>
    <option value="616">Audi A4</option>
    <option value="717">Audi A8</option>
  </optgroup>
</select>

<button onclick="validateCategories()">Validate</button>