选择和选择2有什么区别？

157

拣选和选择二是扩展selectboxes两种比较流行的库。

两者似乎都得到了积极的维护，Chosen较旧并且支持jQuery和Prototype。

Select2仅是jQuery，其文档说Select2受到选择的启发，但没有详细说明所做的任何改进（如有）或其他重写原因。

两个库具有几乎相同的功能集，我发现的唯一比较是一个不确定的jsperf测试页。

这些库中的任何一个都比其他库有什么优势吗？

javascript  jquery-chosen  jquery-select2 
— 保罗
source
11
您对拉取请求的经验可能很好地提示了Select2为什么以重写而不是派生的方式启动。我还注意到Select2具有更好（或至少更长）的文档。
— 保罗
1
当重要或出于差异考虑时，选择的是MIT，而Select2是Apache许可的。
— EGL 2-101
2
确切地说，Select2在Apache许可或GPL v2下可用。is licensed under the Apache License, Version 2.0 (the "Apache License") or the GNU General Public License version 2
— Paul

Answers:

92

从Select2 3.3.1开始，以下是其README.md中记录的内容

Select2支持哪些选择的功能？

  • 处理大型数据集：选择要求将整个数据集作为option标记加载到DOM中，这限制了它只能用于小型数据集。Select2使用一个函数来即时查找结果，从而允许它部分加载结果。
  • 结果分页：由于Select2可处理大型数据集，并且每次必须支持分页时才加载少量匹配结果。当用户滚动到当前加载的结果集的底部以允许“无限滚动”结果时，Select2将调用搜索功能。
  • 结果的自定义标记：选择仅支持呈现文本结果，因为这是标签支持的唯一标记option。Select2提供了一个扩展点，可用于生成任何类型的标记来表示结果。
  • 即时添加结果的能力：Select2提供了从用户输入的搜索词中添加结果的能力，从而可以将其用于标记。
— 14先生
source
2
之前有人确实为选择的“实时添加结果”功能进行了工作：github.com/shezarkhani/chosen/tree/create_new_options我在ExpressionEngine附加MX Select Plus中使用了某种改编（方法是这样的）我到达这里的原因是现在有一个使用Select2的竞争性加载项。
— notacouch 2013年
值得注意的是，禁用Javascript时Select2没有后备功能，因为这些选项是通过AJAX填充的。
— 死锁
10
没有Javascript，就无法通过AJAX提取数据。Select2可以很好地与预填充的值配合使用，而不必使用AJAX。
— zachzurn
@notacouch什么是“矩阵支持”，“低变量支持”和“ SafeCracker支持”？这些概念特定于ExpressionEngine吗？
— John Zabroski
@JohnZabroski是的，它们是商业EE 2.x附加组件（iirc SafeCracker可能已内置）。
— notacouch
40

恕我直言，选择“维护”，但不是“积极维护”。341个问题和51个选择的拉取请求。Select2有128个问题和25个拉取请求。我认为这些模式基本上是

  • 选择表面上对您更具吸引力的那个
  • 在一个或两个应用程序中使用它
  • 遇到定制问题或限制
  • 也许尝试通过问题和请求请求与社区合作
  • 最终受够了，并使用在此过程中学到的知识来建立自己的

无论您选择哪一个，如果您的用例正好在他们的最佳选择中，则任何一个都可以使用。如果没有，您最终将不得不编写自己的代码或对它们进行大量自定义。无论哪种情况，具体选择哪个都不是那么重要。我想我将在这里与@Andy Ray和@paul一起使用，Select2可能是更好的初始选择。

— 彼得·里昂
source
4
我认为，更多的问题意味着更多的人在乎和使用。更大的社区往往会产生更好的代码（这不一定适用于所选代码）。AngularJS：397期，49拉要求; Joyent /节点：476个问题，98个请求。我想知道Firefox，Linux内核或gcc的数字是多少。
— 保罗
是的，这只是一种启发。从理论上讲，自动选择小部件的复杂度应比Joyent /节点之类的复杂度低几个数量级。事实证明，这些事情是高度定制的，因此我感觉人们正在提交拉取请求，这些请求被忽略，然后他们继续维护单独的fork或重写。YMMV。
— Peter Lyons
请注意，如果您的计划要使用自定义方法：选择的代码量要少得多（大约1/3），但是用CoffeeScript和SASS编写（在编译为JS / CSS之前）。如果您已经熟悉CoffeeScript，那么您的选择很简单：选择将更容易理解和自定义。
— Tim Dorr 2013年
@Peter Lyons这些是用来得出您结论的一些非常奇怪的指标（不是我不同意您的结论）。看一下贡献者的数量（Select2 = 239 v。Chosen = 73），但这可能也会产生误导，更多并不总是更好。每个GitHub项目的Pulse和Graphs显示提交历史记录和频率以及大量其他有用的统计信息，以便就哪个项目可以“维护”还是“正在进行的开发”做出明智的决定。
— cfx
FWIW，Chosen在过去几年中进行了很多更新。
— 查尔斯·伍德
21

另一个值得一提的区别是，它Chosen是在Sass和中开发的，CoffeeScript而Select2平原CSS和是JS。这是我个人的选择，Sass并且CoffeeScript不必要的复杂性层使得调试困难。

在尝试了两种方法之后，我决定都不使用它们-尝试获得Select2创建项目的功能似乎是一件非常麻烦的事，因为在连接到<select>元素时您根本无法做到这一点-只是我并没有很好地考虑到我会遇到的麻烦跳过。

我已经决定使用selectize.js，它只是将新<option>...</option>元素添加到表单的DOM中-这是理智的。它也确实可以使用LESS-但我会绕过它，而CSS直接在您的项目中定制编译。

— 丹尼尔·索科洛夫斯基
source
2
selectize.js使用更少。难道这不是技术上的死胡同Sass吗？
— 克里斯·韦瑟林
不，它在同一个域中，但是在三个selectize.js中，需要最少的调整以适合项目。
— Daniel Sokolowski13年
selectize在Firefox 28上存在视觉问题。–
— MEM
@MEM，您能否更具体一点。
— Daniel Sokolowski14年
在Firefox 28（Mac OS X）中，您会在每个输入字段下方看到一个额外的灰色“空白，边距或边框”。我想这不是效果。它必须是视觉上的不一致。很明显，一旦我们在FF上查看它们，例如在Chrome上就不会出现相同的故障。
— MEM 2014年
18

selected.js与select2.js

  • 麻省理工学院的许可证
  • 依存关系：
    • Select2：jQuery
    • 选择：tbc
  • 桌面浏览器支持：
    • 选择2：IE8 +
    • 选择：IE8 +
  • 设备支持：
    • Select2：不清楚
    • 选择：在iPhone，iPod Touch和Android移动设备上禁用
  • 重量（最小）：
    • 选择2：57KB
    • 选择的：27KB
  • 用法：Select2支持更多的“精美” UI（请参阅“模板”）
  • 这两个代码库都可以在Github上找到
    • Select2：贡献：非常活跃
    • 选择：捐款：比Select2少3倍

select2.js贡献 selected.js的贡献

ps。当我发现有关遗漏点的更多信息时，我将尝试更新此答案

— 阿德里安·贝
source
Select2 应该与其他设备一样支持移动设备。我们尝试确保它在所有设备上都可以正常运行，并且具有所有预期功能。
— 凯文·布朗
1
我认为select2更加活跃的主要原因是他们正在使用select2 4.x，这是主要的重写。老实说，我不明白为什么人们如此重视贡献。我希望GitHub有一个累积流程图，该流程图可以跟踪重要内容，例如代码覆盖率和测试用例，以及问题的平均响应时间！（我使用select2，顺便说一句，我的观点只是关于人们专注于贡献和上面图表所鼓励的社会工程的一般讽刺。）
— John Zabroski
13

首先，让我告诉您Chosen和Select2是两个很棒的插件，这是我对Chosen的个人经验。关于选择，他们所说的都是正确的。

PēterisCaune指出的问题select已存在2年，但仍无官方解决方法。根本没有关于API的好的文档。已经指出了很多次（观看第671期），但仍然一无所获。他们花了将近2年的时间解决了这个问题，如果您overflow:hidden在显示div 之前隐藏了div，那么选择的选择基本上是行不通的（并且您必须使用一个witdh:X%根本不会知道是否不查找该问题的选项）。

我要说的主要问题是修复速度，如第92期中的DelvarWorld所述：

我的请求请求解决了这个问题，但是像我的另一个请求和许多选择的请求一样，它们被忽略了。该项目的贡献者太多，而代码库却太少。

我首先选择了Chosen来获得MIT许可证，但遇到了所有这些问题（下拉菜单没有找到API，隐藏了几个小时的溢出隐患），所以我决定切换到select2，因为它具有更好的文档，没有下拉菜单错误和更快的修复。

— 邮编
source
请注意，Select2也已获得MIT的许可。 github.com/select2/select2/blob/master/LICENSE.md
— 2015年
这个答案确实很旧，可能不再适用。有空的时候我会编辑它。
— zipp
6

我发现使用这两个插件的一些区别：

  • 使用select2，您可以在选项中的任何位置进行搜索。例如，如果您有一个名为ABCDEFG的选项，并且键入了CDE，则将在搜索结果中获得该选项，但是选择该选项后，您必须键入AB ..以此类推。

  • 我发现对于较大的数据集，选择似乎比select2更快，尤其是在IE中。

— 雷加曼
source
2
是的，选择的似乎要搜索单词，即会Kingdom在其示例页面上输入内容，United Kingdom这似乎是一种非常合乎逻辑的方式，您也可以指定$("#element").chosen({ search_contains: true });。
— Daniel Sokolowski13年
2
我同意你的看法，通常就是这样。你会在找单词。但是，在许多情况下，如果您键入“ abc”，则在方括号中包含“ xyz（abc）”之类的内容，那么您还会在寻找不会返回的“ xyz”。我想，这可以归结为您正在使用它的场景。在我的Web应用程序中，我已经在它们相关的地方使用了这两种方法。我喜欢选择更多是因为它在IE中具有出色的渲染速度。
— reggaemahn
5

Select2支持移动设备，而Chosen 专门在iPod，iPhone和移动Android上禁用自身。如果您想在移动设备上使用“扩展”选择框，则可以轻松进行选择。

— Danvk
source
@ RezaRahmati thx。您是否也尝试过iPhone？Harvesthq.github.io/chosen/#faqs说：“在iPhone，iPod Touch和Android移动设备上禁用了选择功能”。有关更多信息，请访问github.com/harvesthq/chosen/pull/1388
— Adrien Be
@adrienbe是的，我已经在三星银河标签和iPad上对其进行了测试
— Reza
@RezaRahmati结果如何？
— Adrien Be
@AdrienBe它起作用了，我已经在medicfa.com/Users/Create?reloadList=false中使用它了，用平板电脑打开它并检查结果
— Reza
5

我对Select2的体验在台式机上非常出色，但在触摸式移动设备上却千差万别，总是存在一些怪癖。例如，在具有ic和常规浏览器的xperia st15i上，由于键盘窃取了焦点，下拉菜单始终处于关闭状态。再次将其打开的唯一方法是触摸菜单数十次，用手指按住一秒钟以及其他伏都教具。还是要在下拉列表关闭时开始输入文字，有多少用户会发现？

Selectize.js似乎比Select2平滑得多，但是它在移动设备上也有问题，例如，当选择或输入该值时，由于某种原因它会将页面一直向左移动。另外，在不支持溢出的较旧的Android 2.x设备上，由于键盘不会弹出，因此无法选择几个最上面的选项。:(

仍然必须测试选择的选项，毕竟禁用移动设备可能不是一个坏主意，但是最终，良好的旧下拉列表始终可以在任何地方使用。

更新：现在我也测试了选择，并且在一个方面也比较好：默认情况下，它不适用于移动设备（太好了！），但是它具有过滤单词的问题。例如，不会在单词的中间搜索，并且如果您使用＆nbsp hack进行匹配，它也会忽略完整的选项。回到绘图板。

— dev101
source
要在选择中正确启用搜索，请添加search_contains: true到您的选项。见harvesthq.github.io/chosen/options.html
— Sicco
1

为什么我选择select2而非选择

select2具有的关键功能（没有其他控件可以自动进行魔术控制）是“清除所有”选项，并在控件的右侧带有“ x”。这是我的应用程序的杀手级功能。我不知道为什么其他选择标记增强库缺少此功能。

— 约翰·扎布罗斯基
source
0

Select2不支持AJAX选择

选择2的大小比选择的小。

我之所以选择Select2是因为没有官方支持Ajax操作。

— 亚什
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.