简介
在许多前端应用程序中，Select2 是一个非常流行的下拉框插件。使用 Select2 插件可以使下拉框更加交互式和易于使用。
在一些特殊情况下，我们可能需要在 Select2 下拉框中添加一个重置按钮以重置已选中的值。本文将详细介绍如何实现这样的功能，并给出示例代码。
实现步骤
步骤 1：初始化 Select2 插件
首先，我们需要在页面上引入 Select2 插件并初始化它。以下是一个简单的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------- ----- -- -------- ---- ----- --------------
----- ------------------------------------------------------------------------------------ ---------------- --
-------
------
------- ------------- ------------------------------- -------------
------- ---------------------------
------- ---------------------------
---------
------- -------------------------------
------- -----------------------------------------------------------
------- -------------------------------------------------------------------------------------------
--------
---------------------------- -
-------------------------
---
---------
-------
-------步骤 2：添加重置按钮
接下来，我们需要添加一个按钮来重置 Select2 下拉框。我们可以使用 jQuery 来添加按钮，并将其绑定到重置函数上。
$(document).ready(function() {
$('#resetButton').click(function() {
$('#mySelect').val(null).trigger('change');
});
});在这段代码中，我们使用 .val(null) 将 Select2 下拉框的值设置为 null，然后使用 .trigger('change') 触发值更改事件。这会清除选择并重置下拉框。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------- ----- -- -------- ---- ----- --------------
----- ------------------------------------------------------------------------------------ ---------------- --
-------
------
------- ------------- ------------------------------- -------------
------- ---------------------------
------- ---------------------------
---------
------- -------------------------------
------- -----------------------------------------------------------
------- -------------------------------------------------------------------------------------------
--------
---------------------------- -
-------------------------
---------------------------------- -
-------------------------------------------
---
---
---------
-------
-------结论
在本文中，我们已经学习了如何使用 Select2 插件和 jQuery 来添加一个重置按钮并重置 Select2 下拉框中的值。此功能非常有用，并可以使用户更容易地清除选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14085