标签和标签选择器在前端开发中非常常见。在这篇文章中，我们将介绍一个流行的 jQuery 插件 - Select2，它可以让标签选择器更加高效和易用。
Select2 简介
Select2 是一个基于 jQuery 的开源插件，它可以将普通的 HTML 下拉菜单转换为更强大和可定制的选择器。除了支持搜索、分页和远程数据加载之外，Select2 还提供了标签输入、多选和排序等功能，这些功能使得用户可以更快、更方便地对选择列表进行操作。
如何使用 Select2
要开始使用 Select2，我们需要从官方网站下载插件的最新版本，并将其引入到我们的应用程序中：
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
接下来，我们需要为需要使用 Select2 的下拉菜单添加相应的代码。假设我们有一个简单的表单，其中包含一个下拉列表和一个文本框，我们想要将该下拉列表转换为 Select2：
-- -------------------- ---- ------- ------- -------------- -------------------- ------- ---------------- ---------- ------- ---------------- ---------- ------- ---------------- ---------- ------- ---------------- ---------- ------- ---------------- ---------- --------- ------ ------------- --------------------- ----------------------- --
然后，我们需要在 JavaScript 中编写以下代码：
$(document).ready(function() {
$('#my-select').select2();
});现在，我们的下拉列表已经转换为 Select2 并提供了更多功能。
标签输入
Select2 还支持标签输入的功能。这意味着用户可以轻松地添加新的选项，而不必从固定的选项列表中选择。要启用此功能，请将 tags: true 添加到 select2() 方法中：
$(document).ready(function() {
$('#my-select').select2({
tags: true
});
});现在，当用户键入一个新值时，它将被自动添加为新的选项，并出现在下拉列表中。
Ajax 加载远程数据
在某些情况下，我们希望从远程服务器加载数据并在 Select2 中显示它们。这可以通过使用 Ajax 来实现。
假设我们有一个名为 search.php 的 PHP 脚本，该脚本将返回一个 JSON 数据数组：
-- -------------------- ---- -------
-----
-- ----------
-- - -----------
----- - ------
---------- -- -- ------ -- ------- ----
---------- -- -- ------ -- ------- ----
---------- -- -- ------ -- ------- ----
---------- -- -- ------ -- ------- ----
---------- -- -- ------ -- ------- ---
--
-------- - --------
------- ------ -- ----- -
-- --------------------- --- --- ------ -
---------- - -----
-
-
---- ----------------------
--现在我们需要修改 JavaScript 代码，以便从远程服务器加载数据：
-- -------------------- ---- -------
---------------------------- -
-------------------------
----- -
---- -------------
--------- -------
------ ----
----- ---------------- -
------ -
-- -----------
--
--
--------------- -------------- -
------ -
-------- ----
--
--
------ ----
--
------------------- -
---
---现在，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12909
