filter seelct2 by optgroup from another select2

Question

i wan't to filter select2 select ( serie ) by optgroup from another select2 ( make ) like this

select2 contains car makes

<select name="make">
<option value="">Choisissez Marque</option>
<option value="abarth">abarth</option>
<option value="ac">AC</option>
<option value="acura">Acura</option>
<option value="aixam">AIXAM</option>
<option value="alfa-romeo">ALFA ROMEO</option>
<option value="alpina">ALPINA</option>
<option value="alpine">ALPINE</option>
<option value="astin-healey">ASTIN HEALEY</option>
</select>

select2 that i wan't to filter it conatins car series

<select name="serie">
<optgroup label="abarth">
<option value="500-abarth">500</option>
<option value="595">595</option>
</optgroup><optgroup label="AC">
<option value="cobra">Cobra</option>
</optgroup><optgroup label="AIXAM">
<option value="400-aixam">400</option>
<option value="d-truck">D-TRUCK</option>
</optgroup>
<optgroup label="ALFA ROMEO">
<option value="147">147</option>
<option value="155">155</option>
<option value="156-sportwagon">156 Sportwagon</option>
<option value="159">159</option>
<option value="159-sportwagon">159 Sportwagon</option>
<option value="8c-spider">8C SPIDER</option>
<option value="bertone">Bertone</option>
<option value="brera">BRERA</option>
<option value="crosswagon">Crosswagon</option>
........
</select>

i wan't when i chose a make , select2 that conatins series filter based on this make ( optgroup ) i'm using this code in this website in the main search bar ( make , serie )

Answer 1

Since you don't need to show the optgroup label for other make, I will do it differently, you got two options here:

option 1 (show optgroup label + options)

//option 1 (show optgroup label + options)
var optGroup = $('optgroup[label="' + sel_make + '"]')[0].outerHTML;

option 2 (show only options)

// option 2 (show only options) 
var optGroup = $('optgroup[label="' + sel_make + '"]').html();

In the code you can decide which one you want to use and just remove the other one.

(Note: make sure all your make options are in serie as an optgroup, otherwise the js will throw an error when your selected make does not have an optgroup in serie)

$(document).ready(function() {
  var serieHtml = $('select[name=serie]').html();
  $('[name=make]').select2({placeholder: 'Select a make',width: 200});
  $('[name=serie]').select2({placeholder: 'Select a serie',width: 300});

  $('select[name=make]').change(function() {
    var sel_make = $('[name=make] :selected').text();
    var serie = $('select[name=serie]');
    // restore the full select list first.
    serie.html(serieHtml);
    
    //option 1 (show optgroup label + options)
    var optGroup = $('optgroup[label="' + sel_make + '"]')[0].outerHTML;
    
    // option 2 (show only options) 
    //var optGroup = $('optgroup[label="' + sel_make + '"]').html();

    serie.html(optGroup);
		$('[name=serie]').select2({placeholder: 'Select a serie',width: 300});
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>



<select name="make">
  <option value="">Choisissez Marque</option>
  <option value="abarth">abarth</option>
  <option value="ac">AC</option>
  <option value="acura">Acura</option>
  <option value="aixam">AIXAM</option>
  <option value="alfa-romeo">ALFA ROMEO</option>
  <option value="alpina">ALPINA</option>
  <option value="alpine">ALPINE</option>
  <option value="astin-healey">ASTIN HEALEY</option>
</select>

<select name="serie">
  <option value="">Choisissez serie</option>
  <optgroup label="abarth" style="display: none;">
    <option value="500-abarth">500</option>
    <option value="595">595</option>
  </optgroup>
  <optgroup label="AC">
    <option value="cobra">Cobra</option>
  </optgroup>
  <optgroup label="AIXAM">
    <option value="400-aixam">400</option>
    <option value="d-truck">D-TRUCK</option>
  </optgroup>
  <optgroup label="ALFA ROMEO">
    <option value="147">147</option>
    <option value="155">155</option>
    <option value="156-sportwagon">156 Sportwagon</option>
    <option value="159">159</option>
    <option value="159-sportwagon">159 Sportwagon</option>
    <option value="8c-spider">8C SPIDER</option>
    <option value="bertone">Bertone</option>
    <option value="brera">BRERA</option>
    <option value="crosswagon">Crosswagon</option>
  </optgroup>
</select>