Question

我正在使用select2多个选择框。我想在外部列表中显示我的选择结果。从这个列表中我也希望能够再次删除这些项目。它正在或多或少地工作，但是从外部列表中删除一些项目并通过选择框再次插入后会出现问题。我在这里想象一切来说明我的问题：

＆＃13;

$(function () {
  //Initialize Select2 Elements
  $(".select2").select2();
});

$(document).ready(function () {

  $(".select2").on("change", function () {
    $(".select2-selection__rendered li").each(function () {
      var title = $(this).attr('title');
      if (typeof title !== typeof undefined && title !== false) {
        var animal = title.replace(/ /g, "");
        $('#' + animal).show();
      }
    });
  });


  $(".remove").click(function () {
    $(this).closest(".animals").hide();
    var className = $($(this).closest("li")).attr('id');
    $(".select2-selection__rendered li[title='" + className + "']").remove();
  });

});

＆＃13;

.remove{cursor:pointer}

＆＃13;

<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>

<div class="form-group">
  <select class=" form-control select2" multiple="multiple" data-placeholder="+ select" style="width: 100%;">
    <option>Cat</option>
    <option>Dog</option>
    <option>Bird</option>
  </select>
</div>

<ul>
  <li class="animals" id="Cat" style="display:none">Cat <a class="remove">x</a></li>
  <li class="animals" id="Dog" style="display:none">Dog <a class="remove">x</a></li>
  <li class="animals" id="Bird" style="display:none">Bird <a class="remove">x</a></li>
</ul>

＆＃13;

Answer 1

问题在于您从select2移除项目的方式，我建议您提供option sa值，然后当您点击li获取标题并删除匹配的选项，其中包含所选值列表中的value=title，并将新数组重新分配给您的选择：

var new_values = $(".select2").val().filter(item => item !== className);
$(".select2").val(new_values).change();

注意：您不需要两个ready功能。

希望这有帮助。

使用filter()方法的示例：

＆＃13;

$(function () {
  $(".select2").select2();

  $(".select2").on("change", function () {
    $(".select2-selection__rendered li").each(function () {
      var title = $(this).attr('title');
      
      if (typeof title !== typeof undefined && title !== false) {
        var animal = title.replace(/ /g, "");
        $('#' + animal).show();
      }
    });
  });


  $(".remove").click(function () {
    $(this).closest(".animals").hide();
    
    var className = $($(this).closest("li")).attr('id');
    var new_values = $(".select2").val().filter(item => item !== className);
    
    $(".select2").val(new_values).change();
  });

});

＆＃13;

.remove{cursor:pointer}

＆＃13;

<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>

<div class="form-group">
  <select class=" form-control select2" multiple="multiple" data-placeholder="+ select" style="width: 100%;">
    <option value='Cat'>Cat</option>
    <option value='Dog'>Dog</option>
    <option value='Bird'>Bird</option>
  </select>
</div>

<ul>
  <li class="animals" id="Cat" style="display:none">Cat <a class="remove">x</a></li>
  <li class="animals" id="Dog" style="display:none">Dog <a class="remove">x</a></li>
  <li class="animals" id="Bird" style="display:none">Bird <a class="remove">x</a></li>
</ul>

＆＃13;

使用$.each()方法的示例：

＆＃13;

$(function () {
  $(".select2").select2();

  $(".select2").on("change", function () {
    $(".select2-selection__rendered li").each(function () {
      var title = $(this).attr('title');

      if (typeof title !== typeof undefined && title !== false) {
        var animal = title.replace(/ /g, "");
        $('#' + animal).show();
      }
    });
  });


  $(".remove").click(function () {
    $(this).closest(".animals").hide();

    var className = $($(this).closest("li")).attr('id');

    var new_values = [];

    $.each($(".select2").val(),function(index, item){
      if( item !== className )
        new_values.push(item);
    })

    $(".select2").val(new_values).change();
  });

});

＆＃13;

.remove{cursor:pointer}

＆＃13;

<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>

<div class="form-group">
  <select class=" form-control select2" multiple="multiple" data-placeholder="+ select" style="width: 100%;">
    <option value='Cat'>Cat</option>
    <option value='Dog'>Dog</option>
    <option value='Bird'>Bird</option>
  </select>
</div>

<ul>
  <li class="animals" id="Cat" style="display:none">Cat <a class="remove">x</a></li>
  <li class="animals" id="Dog" style="display:none">Dog <a class="remove">x</a></li>
  <li class="animals" id="Bird" style="display:none">Bird <a class="remove">x</a></li>
</ul>

＆＃13;

如何从外部列表框中控制select2选择框？

1 个答案: