>如果您的项目包含不吸引人的选择框，并且您想向其添加更多功能，则会发现选择和Select2非常有用。这是两个jQuery插件，可帮助您设计选择框以改善其外观，自定义其行为并使它们更友好。
>>在本文中，我将把这两个插件正对准，并比较它们的功能和用例，以便您可以做出最适合您的选择。
钥匙要点
否则，从您选择的CDN（例如CDNJ）中获取文件，并以通常的方式将它们包含在页面中。这是我在下面的模板中所做的，您可以使用此操作以及教程中的示例。
<span>git clone https://github.com/harvesthq/chosen.git </span><span>git clone https://github.com/select2/select2.git </span>
bower <span>install jquery </span>bower <span>install select2 </span>bower <span>install chosen </span>
对比了，差异很明显。该图书馆的开发将全力以赴，最近发布了其官方的第四版（4.0.0）。这意味着正在添加新功能，而其他功能则被弃用和/或删除。
>另一个有用的指标可能是在堆栈溢出上使用这些标签的问题数量。您可以在这里亲自尝试：http：//stackoverflow.com/tags
>如果您输入“ select2”，然后对比“选择”，您会发现Select2插件周围似乎还有更多活动。您还会看到它具有许多集成，例如AngularJS和Ruby在Rails上。
选择盒子和占位符
>您可以使用两个插件搜索您的选项。只需单击框内，然后输入您选择的第一个字符，然后根据您的搜索实时出现结果。
select2使得更容易取消选择已经选择的选项。打开下拉列表时，您可以单击任何选定的元素以取消选择。选定尚未实现此功能。
>
选择的单个和多个选择框的选择和Select2支持占位符文本。选择数量有限
>有时在一个多个选择框中，您需要限制“选项”用户选择的数量。使用选择和Select2的优点是您可以非常简单地更改选择数量。
>您可以限制可以从两个插件的多选盒中选择的选择数量，尽管值得注意的是，选择此功能的版本更为先进。达到限制后，如果您尝试选择一个调用事件的其他选项。 >请参阅Pen的选择数量有限的选择：codepen上的sitepoint（@sitepoint）选择的选择。 >人们会在各种设备上看到您的页面，因此选择框，就像您网站的其他组件一样，应该响应能力。所选和Select2支持设置宽度的百分比都具有一个百分比，并且两者的功能几乎相同。这有助于创建响应式选择的框，以考虑屏幕尺寸或浏览器窗口宽度。 >选择和Select2对此功能的唯一区别是代码。您可以在HTML中声明Select2的select标签。在下面查看它，以了解使Select Select Box响应能力和视觉上更好的方便。
为了让插件知道您已经激活了禁用的结果，请在选项标签中添加属性=“ disabled”，您将在其中使用此功能。
在此选定的示例中，用户只能在其地理位置中选择可用的选项，但是即使它们不可用，它们也可以看到其他选项： 上的禁用结果。
> >以不同的字母为不同的语言编写了大量网站，除此之外，其中一些语言是从另一个方向读取的。建议精选的框应根据这些语言的规则进行调整，并将其方向从LTR（从左到右）转移到RTL。这可以改善用户体验，并提高您网站对该地区用户的可用性。 选择和Select2在Select Box中支持左右技术。他们唯一的区别是Select2需要您在JavaScript文件中声明RTL支持，与此同时，您只需将所选的RTL类与HTML中的选定选择类一起添加。 >
>
如果选择范围很大，并且您无法在选项列表中键入所有选择时，
>
>将标签设置为true后，可用包含令牌分隔符的选项可用。输入标签的名称后，只需键入指定的令牌分离器之一。然后将标签作为选项列表中的选择输入。令牌分离器是通过从键盘中键入字符来创建标签的快捷方式。 >在Select2的帮助下，您可以使用所需的任何字符创建令牌分离器。在下面的示例中，使用了四个令牌分离器： /，，，;和“”（Space）。 >通过键入一个新选项，然后是一个分隔符字符来选择它并将其添加到选项列表：
结论 >
>
以实现Select2，您首先需要在项目中包括Select2 CSS和JavaScript文件。然后，您可以使用$（“ MySelectBox”）。select2（）在任何选择框上初始化select2;命令。您还可以通过将选项传递到select2（）函数来自定义Select2的行为。 ，而从技术上讲可以同时使用和select2在同一项目中，通常不建议进行。这两个插件旨在增强选定框的功能，并将它们一起使用可能导致冲突和意外行为。最好选择最适合您需求的一种。 select2和选择允许通过CSS进行广泛的自定义。您可以通过在您自己的CSS文件中覆盖其默认样式来更改外观的颜色，字体，尺寸和其他方面。 >我可以将所选或select2与Angular或React这样的框架使用？ 选择的是内置的搜索功能。当您在选择框中选择的初始化时，会自动添加搜索框。用户可以在此框中键入此框以过滤选择框中的选项。响应式设计
<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>
bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chosen/Select2 Template</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
</head>
<body>
<script></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<script>// Additional logic goes here</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select2 Template</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
</head>
<body>
<script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script>// Additional logic goes here</script>
</body>
</html>
>选择和Select2具有其他共同的功能，但是我想查看我发现有趣的三个功能：残疾人结果，隐藏的搜索框以及左右（RTL）支持。
最有趣的是残疾人结果。使用此选项集，选择和Select2突出显示了已启用的选项。您可以看到残疾人的选择，但无法选择它们。通常设置禁用结果，以防止用户选择该选项，直到满足其他条件为止。此功能将您的选择框变成一个功能强大的工具，如果您根据需要学习如何使用它，它会增加与用户的互动。
<span>max_selected_options: 2 // Chosen Plugin
</span>
<span>maximumSelectionLength: 2 // Select2 Plugin
</span>
<!-- Chosen - HTML -->
<select >
...
</select>
<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>
>左右（RTL）支撑
> select2受到选择的启发，并且具有所选的大多数功能，但其贡献者并没有止步于此。它们构建了一些最酷的功能，用于选择框，包括程序化访问，模板，禁用模式，标记和令牌化。它还支持Ajax。
程序化访问将选择框带到另一个级别。它们非常有用，与多个精选框结合在一起。您可以使用JavaScript添加根据规则在这些选择框上作用的按钮。
bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chosen/Select2 Template</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
</head>
<body>
<script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<script>// Additional logic goes here</script>
</body>
</html>
标记是Select2的另一个功能，它使Select框更强大，并扩展了普通选择框的限制。它允许用户添加尚未在选项列表中的新选择。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select2 Template</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
</head>
<body>
<script src="https://img.php.cn/code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<script>// Additional logic goes here</script>
</body>
</html>
tokenization
<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>
> Select2最强大的功能之一是模板。模板使我们能够自定义Select2显示的组件的外观。此功能可用于合并选项标签提供的最小输入与图像或其他组件为用户创建视觉显示。 >尽管其中选择有一些不错的选择，但是Select2提供了更多的可用功能，可与Select Box一起使用。如果您将其组合在网站的“流”中，则选择是一个不错的选择，但是如果您想访问更高级的功能，那么Select2是更好的选择。
>我强烈建议使用select2;它的更新频率比所选择的频率更高，并且错误更少。我发现对Select2的文档非常有帮助。在阅读它时，您可以随时使用项目中的select2组件。>如何在项目中实现select2？
>我可以在同一项目中使用所选和select2吗？
我如何自定义Select2的外观并选择？
如何使用Select2？非常适合处理大型数据集的AJAX支持。您可以将Select2配置为随着用户类型即时获取数据，从而阻止需要预先加载所有数据。与大型数据集一起工作时，这可以显着提高性能。
>如何使用select2和选择多个选择？
select2和选择支持多个选择。您可以通过在选择框中添加多个属性来启用此功能。当启用多个选择时，用户可以从选择框中选择多个选项。>我可以使用移动设备选择或选择2使用？
我如何处理Select2并选择的事件？您可以聆听和回应的事件。例如，您可以在用户选择时聆听更改事件以运行功能。您可以使用jQuery中的.on（）方法来连接事件侦听器。
>
以上是jQuery选择框组件 - 选择vs select2的详细内容。更多信息请关注PHP中文网其他相关文章！
