Question

我需要以下方面的帮助：

如何制作两级选择选项。使用JavaScript的category和subcategory？

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

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

Answer 1

两级选择选项AKA多级下拉菜单可以使用HTML，CSS设计。

根据功能要求，Javascript可用于在多级下拉列表中实现其他功能。

可以使用<div> tags或<ul> tags来设计多级下拉菜单。

我个人更喜欢<ul> tags

查看我的codepen（https://codepen.io/Divine1/pen/mXVPmQ），了解如何开始设计多级下拉列表。

Answer 2

检查出来：

var el = document.getElementById('category');
el.onchange = function(){
	var category = $('#category :selected').attr('class');
  $('#subcategory optgroup').hide();
  $('#subcategory').val("");
  $('#subcategory .'+category).show();
}

#subcategory optgroup{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

Answer 3

你可以这样做：

$('#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');
});

Online demo(jsFiddle)

如何制作两级选择选项类别和子类别？

3 个答案: