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

我正在使用select2多重选择框。我想在外部列表中显示选择的结果。从此列表中，我还希望能够再次删除这些项目。它或多或少地起作用，但是从外部列表中删除了一些项目并通过选择框将其再次插入后，它变得有点麻烦了。我将此处的所有内容可视化以说明我的问题：

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

最佳答案

问题在于从select2中删除​​项目的方式，我建议给您option的值，然后单击li以获得标题并从列表中删除具有value=title的匹配选项。所选值，然后将新数组重新分配给您选择的对象：：

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>

关于jquery - 如何从外部列表框中控制select2选择框？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40612393/