how to make subcategory required with javascript?

Question

hello everyone i need help.

i need first selected must be select model type and must be required ?

how to make id="subcategory" required ?

required for id="subcategory" not working why ?

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

"*`required` for `id="subcategory"` not working why?*" - because you're not setting, or updating, the `required` property in your jQuery. — David Thomas, Feb 10 '18 at 15:33

Temani Afif · Accepted Answer · 2018-02-11T11:57:06.407

Here is an idea on where I updated slightly the second select to make the select mode type outside the optgroup. You will see that you won't be able to click on send until you select both values.

You can refer to this link to understand my changes:

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>

this code not working property. when select category and subcategory and again change category, subcategory not hidding stays old category how to fix ? — , Feb 11 '18 at 11:51
@ZuraKushitashvili are you sure ? do you see this behavior in the snippet here ? as it works fine for me here — Temani Afif, Feb 11 '18 at 11:51
sorry but we have one problem. when select category and refresh browser page subcategory not required any more. how to fix this problem ? — , Feb 11 '18 at 12:19

how to make subcategory required with javascript?

1 Answers1