javascript - 如何在 Select2 上使用动态选择？

Question

我想根据第一个 select 使用 Select2 选择分组的国家/地区。我正在尝试使用基本的 Select2 代码，但带有 data-group 的第二个 select 无法正常工作。

我的问题是:

Changing the first select (Continents) option, then move to second (Countries) and choose a country, now back to Continents and change to another. Go to second and choose another Country, it won't select.

示例:选择欧洲 > 选择意大利 > 选择美国 > 选择阿根廷 > 再次选择欧洲 > 选择任何国家 > 阿根廷将保留为所选国家/地区。

这是一个小视频，显示了发生的问题:Youtube Link

我还在代码片段中附加了我的工作代码。

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

$(function(){
    $('#groups').on('change', function(){
        var val = $(this).val();
        var sub = $('#sub_groups');
        $('option', sub).filter(function(){
            if (
                 $(this).attr('data-group') === val 
              || $(this).attr('data-group') === 'SHOW'
            ) {
              if ($(this).parent('span').length) {
                $(this).unwrap();
              }
            } else {
              if (!$(this).parent('span').length) {
                $(this).wrap( "<span>" ).parent().hide();
              }
            }
        });
    });
    $('#groups').trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<select class="js-example-basic-single" id="groups" style="width:50%;">
    <option value='America'>America</option>
    <option value='Europe'>Europe</option>
    <option value='Asia'>Asia</option>
<select>
    
<select class="js-example-basic-single" id="sub_groups" style="width:50%;">
    <option data-group='SHOW' value='0'>-- Select --</option>
    <option data-group='America' value='Argentina'>Argentina</option>
    <option data-group='America' value='Brazil'>Brazil</option>
    <option data-group='America' value='Chile'>Chile</option>
    <option data-group='Europe' value='Italy'>Italy</option>
    <option data-group='Europe' value='France'>France</option>
    <option data-group='Europe' value='Spain'>Spain</option>
    <option data-group='Asia' value='China'>China</option>
    <option data-group='Asia' value='Japan'>Japan</option>
<select>

这个问题有解决办法吗？

Answer 1

当 groups 更改时，将 sub_groups 的值重置为 0。

$('#groups').on('change', function(){
  var val = $(this).val();
  var sub = $('#sub_groups');
  sub.val(0);
  ...
});

另外，请注意，HTML 中的 select 标记未正确关闭。

$(document).ready(function() {
  $('.js-example-basic-single').select2();
});

$(function() {
  $('#groups').on('change', function() {
    var val = $(this).val();
    var sub = $('#sub_groups');
    sub.val(0);
    $('option', sub).filter(function() {
      if ($(this).attr('data-group') === val ||
          $(this).attr('data-group') === 'SHOW') {
        if ($(this).parent('span').length) {
          $(this).unwrap();
        }
      } else {
        if (!$(this).parent('span').length) {
          $(this).wrap("<span>").parent().hide();
        }
      }
    });
  });
  $('#groups').trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<select class="js-example-basic-single" id="groups" style="width:50%;">
  <option value='America'>America</option>
  <option value='Europe'>Europe</option>
  <option value='Asia'>Asia</option>
</select>

<select class="js-example-basic-single" id="sub_groups" style="width:50%;">
  <option data-group='SHOW' value='0'>-- Select --</option>
  <option data-group='America' value='Argentina'>Argentina</option>
  <option data-group='America' value='Brazil'>Brazil</option>
  <option data-group='America' value='Chile'>Chile</option>
  <option data-group='Europe' value='Italy'>Italy</option>
  <option data-group='Europe' value='France'>France</option>
  <option data-group='Europe' value='Spain'>Spain</option>
  <option data-group='Asia' value='China'>China</option>
  <option data-group='Asia' value='Japan'>Japan</option>
</select>