如何从外部列表框控制 select2 select 框？

Question

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

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

});

.remove{cursor:pointer}

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

Answer 1

问题出在您从 select2 中删除项目的方式，我建议给您的 option 一个值，然后当您点击 li 时获取标题并删除匹配项selected 值列表中具有 value=title 的选项，并将新数组重新分配给您的 select : :

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

注意：您不需要两个 ready 函数，一个就够了。

希望对您有所帮助。

使用filter()方法的示例：

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

});

.remove{cursor:pointer}

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

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

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

});

.remove{cursor:pointer}

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

如何从外部列表框控制 select2 select 框？

How can I control the select2 select box from an external list box?

jquery

twitter-bootstrap

jquery-select2

select2