jQuery选择框组件 - 选择vs select2

>本文由马丁·马丁内斯（MartínMartínez）和克里斯·佩里（Chris Perry）进行了同行评审。感谢SitePoint所有的同行评审员制作SitePoint内容的最佳功能！ 您是否曾经从事一个项目，看来有些东西在视觉上是什么？也许该项目快要完成了，但是有些元素看起来不太好？这些可能是小细节，但它们有所作为。

>如果您的项目包含不吸引人的选择框，并且您想向其添加更多功能，则会发现选择和Select2非常有用。这是两个jQuery插件，可帮助您设计选择框以改善其外观，自定义其行为并使它们更友好。

>

>在本文中，我将把这两个插件正对准，并比较它们的功能和用例，以便您可以做出最适合您的选择。

钥匙要点

选择和Select2是jQuery插件，可增强选择框的功能，从而提高其外观和用户友好性。虽然选择是一个可靠且坚固的插件，但它并不像Select2那样积极地维护，该插件定期添加新功能和集成。

>

>两个插件都支持占位符文本，允许在选项中进行搜索，并提供限制选择数量的能力。但是，Select2还提供了在打开下拉列表时取消选择选项的选项，尚未在所选中实现的功能。
• >
select2脱颖而出，其其他功能，包括程序化访问，标记，令牌化和模板。它还支持Ajax并提供更高级的自定义选项，使其成为选择框的功能更强大的工具。
>选择是基本选择盒增强功能的一个不错的选择，但建议使用Select2来进行更高级的功能和常规更新。 Select2还提供全面的文档，使其更容易在项目中实施和使用。
>安装
选择和Select2都可以通过GitHub获得。这意味着您可以克隆各自的存储库并获取所需的文件。

>

否则，您可以将两个插件与Bower安装（作为GitHub的接口）。如果鲍尔是您的首选路线，那么您不妨在使用时抓住jQuery。

否则，从您选择的CDN（例如CDNJ）中获取文件，并以通常的方式将它们包含在页面中。这是我在下面的模板中所做的，您可以使用此操作以及教程中的示例。

选择

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

select2

bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>

项目是否积极维护？

>您可以通过访问其GitHub页面来确定，所选插件的开发并不像以前那样活跃，并且是2014年2月6日所选日期的最新版本。这并不是说图书馆已经存在被遗弃 - 远离它！相反，开发人员将其带到了他们想要的地方，并且仍然是一个可靠且强大的插件。 另一方面，与select2相比，

对比了，差异很明显。该图书馆的开发将全力以赴，最近发布了其官方的第四版（4.0.0）。这意味着正在添加新功能，而其他功能则被弃用和/或删除。

>另一个有用的指标可能是在堆栈溢出上使用这些标签的问题数量。您可以在这里亲自尝试：http：//stackoverflow.com/tags

>如果您输入“ select2”，然后对比“选择”，您会发现Select2插件周围似乎还有更多活动。您还会看到它具有许多集成，例如AngularJS和Ruby在Rails上。

选择盒子和占位符

select2和选择更改简单的方式，并出现多个选择框。

在带有纯HTML的多个选择框中，用户可以看到列表中可用的一些选项。这不是视觉上吸引人的，必须对此观点进行更改。选择和select2删除“列表视图”，当您在“选择框”内单击时，将出现选项列表。只有这样，您才能进行选择。

>您可以使用两个插件搜索您的选项。只需单击框内，然后输入您选择的第一个字符，然后根据您的搜索实时出现结果。

select2使得更容易取消选择已经选择的选项。打开下拉列表时，您可以单击任何选定的元素以取消选择。选定尚未实现此功能。

>

选择的单个和多个选择框的选择和Select2支持占位符文本。

选择数量有限

>有时在一个多个选择框中，您需要限制“选项”用户选择的数量。使用选择和Select2的优点是您可以非常简单地更改选择数量。

>您可以限制可以从两个插件的多选盒中选择的选择数量，尽管值得注意的是，选择此功能的版本更为先进。达到限制后，如果您尝试选择一个调用事件的其他选项。> 在此示例中，要求用户选择两天，这是他们一周中最有生产力的。当他们尝试选择第三天时，选择将调用活动。我已经选择了以添加警报，显示已达到限制：>

>请参阅Pen的选择数量有限的选择：codepen上的sitepoint（@sitepoint）选择的选择。

响应式设计

>人们会在各种设备上看到您的页面，因此选择框，就像您网站的其他组件一样，应该响应能力。所选和Select2支持设置宽度的百分比都具有一个百分比，并且两者的功能几乎相同。这有助于创建响应式选择的框，以考虑屏幕尺寸或浏览器窗口宽度。

>选择和Select2对此功能的唯一区别是代码。您可以在HTML中声明Select2的select标签。在下面查看它，以了解使Select Select Box响应能力和视觉上更好的方便。

<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>

  
    <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">
  
  

    <script></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
    <script>// Additional logic goes here</script>
  

  
    <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">
  
  

    <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>
  

其他类似的功能

>选择和Select2具有其他共同的功能，但是我想查看我发现有趣的三个功能：残疾人结果，隐藏的搜索框以及左右（RTL）支持。

禁用结果

最有趣的是残疾人结果。使用此选项集，选择和Select2突出显示了已启用的选项。您可以看到残疾人的选择，但无法选择它们。通常设置禁用结果，以防止用户选择该选项，直到满足其他条件为止。此功能将您的选择框变成一个功能强大的工具，如果您根据需要学习如何使用它，它会增加与用户的互动。

为了让插件知道您已经激活了禁用的结果，请在选项标签中添加属性=“ disabled”，您将在其中使用此功能。

在此选定的示例中，用户只能在其地理位置中选择可用的选项，但是即使它们不可用，它们也可以看到其他选项：

<span>max_selected_options: 2 // Chosen Plugin
</span>

>请参阅codepen上的sitepoint（@sitepoint）的笔选择的笔：

上的禁用结果。

隐藏搜索框

>在单个选择框中的选项列表中没有很多选择时，建议隐藏搜索框。在选择中，要隐藏搜索框，您应该使用Disable_search_threshold并将其设置为比选择框中的选项数量更大的值。

>相同的逻辑适用于select2，但唯一的更改是术语，而不是disable_search_threshold，它称为MunimumResultsForsearch。

<span>maximumSelectionLength: 2 // Select2 Plugin
</span>

<!-- Chosen - HTML -->
<select>
  ...
</select>

>我应该添加有关Select2的一件事是，您可以永久隐藏搜索框，而不必担心选择框中的选项数量。您可以通过将MinimumResultsForsearch设置为Infinity来做到这一点。

>

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

>左右（RTL）支撑

>以不同的字母为不同的语言编写了大量网站，除此之外，其中一些语言是从另一个方向读取的。建议精选的框应根据这些语言的规则进行调整，并将其方向从LTR（从左到右）转移到RTL。这可以改善用户体验，并提高您网站对该地区用户的可用性。

选择和Select2在Select Box中支持左右技术。他们唯一的区别是Select2需要您在JavaScript文件中声明RTL支持，与此同时，您只需将所选的RTL类与HTML中的选定选择类一起添加。为什么选择select2而不是选择

> select2受到选择的启发，并且具有所选的大多数功能，但其贡献者并没有止步于此。它们构建了一些最酷的功能，用于选择框，包括程序化访问，模板，禁用模式，标记和令牌化。它还支持Ajax。

>

程序化访问

程序化访问将选择框带到另一个级别。它们非常有用，与多个精选框结合在一起。您可以使用JavaScript添加根据规则在这些选择框上作用的按钮。

>如果多个选择框中的某些选项具有彼此链接的一些逻辑链接，并且根据您的观察，这些“链接”选项很有可能从很多用户中选择，那么选择这些选项很有用单击一次选择。

bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>

  
    <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">
  
  

    <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>
  

在此示例中，您可以通过单击“ iOS Technologies”按钮快速设置“ Swift”和“ Objective-C”：

>请参阅codepen上的sitepoint（@sitepoint）的Pen Select2 - 编程方法。

标记

标记是Select2的另一个功能，它使Select框更强大，并扩展了普通选择框的限制。它允许用户添加尚未在选项列表中的新选择。

> 如果选择范围很大，并且您无法在选项列表中键入所有选择时，

标记也非常方便。启用标签时，用户无法在列表中找到自己的选择时，它会“推”他们创建自己选择的标签。

使用标记时要小心，因为“恶意”用户输入无效标签的“恶意”用户可能会滥用它，这与Select Box的目标无关。

启用标签，您应该将标签选项设置为true。

>

  
    <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">
  
  

    <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>
  

>请参阅codepen上的sitepoint（@sitepoint）标记的笔选择的笔。

tokenization

>将标签设置为true后，可用包含令牌分隔符的选项可用。输入标签的名称后，只需键入指定的令牌分离器之一。然后将标签作为选项列表中的选择输入。令牌分离器是通过从键盘中键入字符来创建标签的快捷方式。

>在Select2的帮助下，您可以使用所需的任何字符创建令牌分离器。在下面的示例中，使用了四个令牌分离器： /，，，;和“”（Space）。

<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>

>通过键入一个新选项，然后是一个分隔符字符来选择它并将其添加到选项列表：>：

请参见Pen Select2 - codepen上的SitePoint（@sitepoint）的tokenization。

templating

> Select2最强大的功能之一是模板。模板使我们能够自定义Select2显示的组件的外观。此功能可用于合并选项标签提供的最小输入与图像或其他组件为用户创建视觉显示。

这个示例与Bootstrap的字形组合selectin的模板：

>请参阅codepen上的sitepoint（@sitepoint）的笔select2。

结论

>尽管其中选择有一些不错的选择，但是Select2提供了更多的可用功能，可与Select Box一起使用。如果您将其组合在网站的“流”中，则选择是一个不错的选择，但是如果您想访问更高级的功能，那么Select2是更好的选择。

>我强烈建议使用select2;它的更新频率比所选择的频率更高，并且错误更少。我发现对Select2的文档非常有帮助。在阅读它时，您可以随时使用项目中的select2组件。

>

如果您使用选择或Select2有任何好或坏的经历，请在下面的评论部分中告诉我。

>

>关于jQuery选择框组件的常见问题（常见问题解答）：选择的vs select2

选择和Select2？

选择和Select2之间的关键差异是什么流行的jQuery插件，用于增强SELECT框的功能。它们之间的关键差异在于他们的特征和可用性。 Select2支持AJAX，它可以通过用户类型即时加载大型数据集使用大型数据集。它还支持标记和无限滚动。另一方面，选择不支持Ajax或标记，但它确实提供了用户友好的搜索功能和更简单的界面。

>如何在项目中实现select2？

以实现Select2，您首先需要在项目中包括Select2 CSS和JavaScript文件。然后，您可以使用$（“ MySelectBox”）。select2（）在任何选择框上初始化select2;命令。您还可以通过将选项传递到select2（）函数来自定义Select2的行为。

>我可以在同一项目中使用所选和select2吗？

，而从技术上讲可以同时使用和select2在同一项目中，通常不建议进行。这两个插件旨在增强选定框的功能，并将它们一起使用可能导致冲突和意外行为。最好选择最适合您需求的一种。

我如何自定义Select2的外观并选择？

select2和选择允许通过CSS进行广泛的自定义。您可以通过在您自己的CSS文件中覆盖其默认样式来更改外观的颜色，字体，尺寸和其他方面。

如何使用Select2？非常适合处理大型数据集的AJAX支持。您可以将Select2配置为随着用户类型即时获取数据，从而阻止需要预先加载所有数据。与大型数据集一起工作时，这可以显着提高性能。

>我可以将所选或select2与Angular或React这样的框架使用？

是的，选择和Select2都可以与JavaScript框架一起使用，例如Angular框架。或反应。但是，您可能需要使用其他包装器或库来确保兼容性。

如何将搜索功能添加到所选的搜索功能？

选择的是内置的搜索功能。当您在选择框中选择的初始化时，会自动添加搜索框。用户可以在此框中键入此框以过滤选择框中的选项。

>如何使用select2和选择多个选择？

select2和选择支持多个选择。您可以通过在选择框中添加多个属性来启用此功能。当启用多个选择时，用户可以从选择框中选择多个选项。

>我可以使用移动设备选择或选择2使用？

我如何处理Select2并选择的事件？您可以聆听和回应的事件。例如，您可以在用户选择时聆听更改事件以运行功能。您可以使用jQuery中的.on（）方法来连接事件侦听器。

>

以上是jQuery选择框组件 - 选择vs select2的详细内容。更多信息请关注PHP中文网其他相关文章！