Question

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

我的问题是：

更改第一个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

更改sub_groups时，将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>

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

1 个答案: