select2 |如何将两个select2组合在一起

Question

任务是确定从第一个选择中选择一个项目后，第二个选择中将显示哪些元素。

例如，如果我从第一个列表中选择第一个选项，则在第二个列表中我们必须只包含第一个组的元素。

HTML

<div>
  <select name="" id="select__brand">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>
<div>
  <select name="" id="select__model">
    <optgroup label="1">
      <option value="6">6</option>
      <option value="7">7</option>
    </optgroup>
    <optgroup label="2">
      <option value="8">6</option>
      <option value="9">7</option>
    </optgroup>
    <optgroup label="3">
      <option value="10">6</option>
      <option value="11">7</option>
    </optgroup>
  </select>
</div>

JS

    $('#select__brand').select2({
        placeholder: 'Mark',
  width: "100%"
    });
    $('#select__model').select2({
        placeholder: 'Model',
        width: "100%"
    });

var model;

    $('#select__brand').change(function () {
        model = $(this).val();
    });

$('#select__model').on('select2:open', function(e){
        $(".select2-results__option[aria-label]").hide();
        $(".select2-results__option[aria-label='" + model + "']").show();
});

在这里你可以看到我的尝试。 - http://jsfiddle.net/vahenm0z/10/