Select2 删除搜索 - Javascript

Select2是一款可以改善传统HTML下拉选择框的插件，它可以实现搜索、过滤、多选等功能。但是有时用户可能需要删除已选中的项，本文将介绍如何使用Javascript代码实现这种功能。

简介

Select2使用的是jQuery库，所以我们需要先引入jQuery库和Select2插件。然后，在页面加载完成后，调用Select2的初始化函数来初始化下拉选择框。如下所示：

// 引入jQuery库和Select2插件
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

// Select2下拉选择框初始化函数
$(document).ready(function() {
    $('.js-example-basic-multiple').select2();
});

接下来，我们需要添加一个删除按钮以实现删除选中项的功能。由于Select2插件是基于原生下拉选择框构建的，所以我们可以通过操作原生下拉选择框来实现删除功能。

实现步骤

1. 根据Select2的HTML结构，找到对应的原生下拉选择框元素。我们可以使用Chrome浏览器的开发者工具查看Select2的HTML结构。

2. 给删除按钮绑定一个点击事件，在点击时获取被选中项的value值。

3. 使用jQuery的选择器语法，找到原生下拉选择框中对应的选项，并将其删除。

4. 调用Select2的API函数，更新下拉选择框的显示状态。

下面是完整的代码实现示例：

// 删除按钮点击事件处理函数
$('.js-remove-item-btn').on('click', function () {
    // 获取被选中项的value值
    var selectedValue = $('.js-example-basic-multiple').val();
    // 根据value值找到对应的选项并删除
    $('.js-example-basic-multiple option[value="' + selectedValue + '"]').remove();
    // 调用Select2 API函数，更新下拉选择框状态
    $('.js-example-basic-multiple').trigger('change.select2');
});

总结

在Select2下拉选择框中实现删除选中项的功能，主要涉及到原生下拉选择框的操作、jQuery选择器语法的运用以及使用Select2 API函数更新状态等方面。通过本文的介绍，相信您已经掌握了这种实现方式的基本思路和操作步骤。