通过optgroup从另一个select2过滤seelct2

Question

我不想通过optgroup从另一个select2（make）过滤select2 select（serie）

select2包含汽车制作

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

选择2，我不想过滤它的车系列

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

我不想当我选择一个make，select2那个conatins系列过滤器基于这个make（optgroup） 我在主搜索栏（make，serie）中的website 中使用此代码

Answer 1

由于您不需要显示其他make的optgroup标签，我将采用不同的方式，您有两种选择：

选项1（显示optgroup标签+选项）

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

选项2（仅显示选项）

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

在代码中，您可以决定要使用哪一个，然后删除另一个。

（注意：请确保所有make个选项都在serie作为optgroup，否则当您选择的make没有{j}时，js会抛出错误serie）中的optgroup

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;