CODEWITHSUNDEEP
javascriptjqueryhtml
user8918745
user8918745

Reputation:

How to make two level select option category and subcategory?

I need help with the following:

How to make two level select option. category and subcategory with 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>

I need make two level select option with javascript or jquery I don't know how JavaScript works and I need help.

Upvotes: 1

Views: 3048

Answers (3)

Ali Soltani
Ali Soltani

Reputation: 9927

You can do it like this:

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

Upvotes: 1

Sreekanth Reddy Balne
Sreekanth Reddy Balne

Reputation: 3424

Check it out:

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>

Upvotes: 0

divine
divine

Reputation: 4912

Two Level selectoption AKA Multilevel dropdowns can designed using HTML,CSS.

Based on the functional requirements, Javascript can be used for implementing additional features in Multilevel dropdowns.

Multilevel dropdowns can be designed by making use of <div> tags or <ul> tags .

i Personally prefer <ul> tags

Take a look at my codepen (https://codepen.io/Divine1/pen/mXVPmQ) to have an understanding on how to start designing multi-level dropdown.

Upvotes: 0

Related Questions