我正在使用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一个'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();
});
});.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句