javascript - 如何使javascript需要子类别？

Question

大家好，我需要帮助。

我需要首先选择必须是选择模型类型并且必须是必需的？

如何使 id="subcategory"成为必需的？

要求 id="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">
    <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> 




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

Answer 1

这里是关于我在何处稍微更新了第二个选择以使 optgroup 之外的 select mode type 的想法。您会看到，在您同时选择这两个值之前，您将无法点击发送。

你可以引用这个链接来了解我的改动:

https://stackoverflow.com/a/6048891/8620333

$('#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(); 
  $subCat.show();
  $('#subcategory option').removeAttr('selected');
  $('#subcategory > option').attr('selected', 'selected');
  //adding this will make it required
  $('#subcategory').attr('required','required')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="category" required>
    <option value="" disabled selected>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">
  <option value="">select model type</option>
  <optgroup class="Volvo">
    <option value="44">XC60</option>
    <option value="55">XC90</option>
  </optgroup>
  <optgroup class="Saab">
    <option value="66">Saab 9XX</option>
    <option value="77">Saab Aero-X</option>
  </optgroup>
  <optgroup class="Opel">
    <option value="88">Corsa A</option>
    <option value="99">Corsa B</option>
  </optgroup>
  <optgroup class="Audi">
    <option value="616">Audi A4</option>
    <option value="717">Audi A8</option>
  </optgroup>
</select>
<input type="submit" value="send">
</form>