Javascript 如何使两级选择选项类别和子类别？

我需要以下方面的帮助：

如何使两级选择选项<代码>类别和

子类别

是否使用JavaScript

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

选择模型类型
沃尔沃汽车
萨博
欧宝
奥迪
选择模型类型
XC60
XC90
选择模型类型
萨博9XX
萨博Aero-X
选择模型类型
科萨A
科萨B
选择模型类型
奥迪A4
奥迪A8

---

我需要使用javascript或jquery制作两级选择选项我不知道javascript是如何工作的，我需要帮助。

两级选择选项又称多级下拉菜单可以使用HTML、CSS设计

根据功能需求，Javascript可用于在多级下拉列表中实现附加功能

通过使用

标签

或

标签

可以设计多级下拉菜单

我个人更喜欢

标签

查看我的codepen（），了解如何开始设计多级下拉菜单。

查看：

var el=document.getElementById（'category'）；
el.onchange=函数（）{
var category=$（“#category:selected”）.attr（'class'）；
$（“#子类别optgroup”）.hide（）；
$（“#子类别”）.val（“”）；
$（“#子类别”。+类别）.show（）；
}

#子类别optgroup{
显示：无；
}

选择模型类型
沃尔沃汽车
萨博
欧宝
奥迪
选择模型类型
XC60
XC90
选择模型类型
萨博9XX
萨博Aero-X
选择模型类型
科萨A
科萨B
选择模型类型
奥迪A4
奥迪A8

您可以这样做：

$('#subcategory').find('optgroup').hide(); // initialize
$('#category').change(function() {
    var $cat = $(this).find('option:selected');
    var $subCat = $('#subcategory').find('.' + $cat.attr('class'));
    $('#subcategory').find('optgroup').not("'" + '.' + $cat.attr('class') + "'").hide(); // hide other optgroup
    $subCat.show();
    $subCat.find('option').first().attr('selected', 'selected');
});

---

还有一个问题，如何使子类别成为必需的且必须看到第一类选择型号类型如何使子类别成为必需的？你能帮我解决这个问题吗？