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

Posted 2023-05-07

【中文标题】如何从外部列表框中控制 select2 选择框？

【英文标题】：How can I control the select2 select box from an external list box?

【发布时间】：2017-03-29 11:40:12

【问题描述】：

我正在使用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();
  );

);

.removecursor: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>

【参考方案1】：

问题在于您从select2 中删除项目的方式，我建议给您的option'sa 值，然后当您单击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();
  );

);

.removecursor: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();
  );

);

.removecursor: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>

【讨论】：

我在这一行有冲突var new_values = $(".select2").val().filter(item => item !== className);你知道为什么吗？

今天冲突来了！昨天一切正常

您是否在文档中添加了更多 select2 类元素？

不，我没有，但正如您所见，即使您在此处的预览也无法正常工作，明白了吗？

请使用each()检查新小提琴。