select2 清除选项

📌 相关文章

📜 select2 清除选项 - Javascript (1)

📅 最后修改于: 2023-12-03 14:47:21.889000 🧑 作者: Mango

Select2 是一个 jQuery 插件，提供了一个更强大、交互性更好的下拉框（select）控件。在 Select2 中，可以选择单个或多个选项，也可以通过搜索框快速筛选选项。

有时候，我们需要在 Select2 中清除已选择的选项，这时可以使用 Select2 自带的清除功能。本文将介绍如何使用清除选项功能。

前置条件

已引入 Select2 的相关文件（CSS 和 JS）。
已创建一个 Select2 实例。

清除选项方法

使用 Select2 清除选项功能，需要先获取 Select2 的实例化对象，然后调用 val(null) 方法即可清空已选项。

// 获取 Select2 实例化对象
var select2Instance = $('#mySelect2').select2();

// 清空已选项
select2Instance.val(null).trigger('change');

以上代码中，#mySelect2 为创建 Select2 的选择器。

在清空已选项时，还需要触发 change 事件，以确保 Select2 控件的显示与值同步。

示例

以下是一个使用 Select2 清除选项的示例。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Select2 清除选项示例</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">
</head>
<body>
  <label for="mySelect2">Select2 示例：</label>
  <select id="mySelect2" multiple="multiple">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
    <option value="4">选项四</option>
    <option value="5">选项五</option>
  </select>
  <button id="clearBtn">清除选项</button>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
  <script>
    $(function() {
      // 创建 Select2 实例
      var select2Instance = $('#mySelect2').select2();

      // 绑定清除按钮事件
      $('#clearBtn').click(function() {
        // 清空已选项
        select2Instance.val(null).trigger('change');
      });
    });
  </script>
</body>
</html>

总结

本文介绍了如何使用 Select2 清除选项功能，示例代码中展示了如何在 Select2 控件中清除已选择的选项。除此之外，Select2 还有很多其他功能可以使用，可以查看官方文档进行学习。