157

Chosen和Select2是两个比较流行的扩展选择框的库。

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

Select2 只是 jQuery，它的文档说 Select2 是受 Chosen 启发的，但没有详细说明所做的任何改进（如果有的话）或重写的其他原因。

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

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

4

11 回答 11

92

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

Select2 支持哪些选择不支持？

  • 处理大型数据集：Chosen 要求将整个数据集作为option标签加载到 DOM 中，这限制了它只能处理小型数据集。Select2 使用一个函数来即时查找结果，这允许它部分加载结果。
  • 结果分页：由于 Select2 适用于大型数据集，并且一次只加载少量匹配结果，因此它必须支持分页。当用户滚动到当前加载的结果集的底部时，Select2 将调用搜索函数，从而允许“无限滚动”结果。
  • 结果的自定义标记：选择仅支持呈现文本结果，因为这是标签支持的唯一标记option。Select2 提供了一个扩展点，可用于生成任何类型的标记来表示结果。
  • 动态添加结果的能力：Select2 提供了从用户输入的搜索词添加结果的能力，这允许它用于标记。
于 2013-03-04T12:48:16.623 回答
40

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

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

无论您选择哪一个，如果您的用例恰好处于最佳位置，那么任何一个都可以工作。如果没有，您最终将不得不自己编写或大量定制这些内容。在任何一种情况下，具体选择哪一个都不是那么重要。我想我会在这里支持@Andy Ray 和@paul，Select2 可能是更好的初始选择。

于 2012-11-27T01:09:09.357 回答
23

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

在尝试了这两种方法之后，我决定不使用任何一种 - 尝试获得Select2创建项目功能结果是一件非常麻烦的事情，因为当附加到元素时你根本无法做到<select>- 它只是觉得我没有好好考虑过我会拥有的箍跳过。

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

于 2013-08-07T20:16:30.740 回答
19

selected.js 与 select2.js

  • 两者的 MIT 许可证
  • 依赖项：
    • 选择2：jQuery
    • 已选择：待定
  • 桌面浏览器支持：
    • 选择2：IE8+
    • 选择：IE8+
  • 设备支持：
    • 选择2：不清楚
    • 已选择：在 iPhone、iPod Touch 和 Android 移动设备上禁用
  • 重量（缩小）：
    • 选择2：57KB
    • 已选择：27KB
  • 用法：Select2 支持更多“花哨”的 UI（参见“模板”）
  • 两个代码库都可以在 Github 上找到
    • Select2：贡献：非常活跃
    • 选择：贡献：比 Select2 少大约 3 倍

select2.js 贡献 selected.js 贡献

附言。当我了解有关缺失点的更多信息时，我将尝试更新此答案

于 2015-01-26T15:17:31.710 回答
13

首先，让我告诉你 Chosen 和 Select2 是两个很棒的插件，这是我对 Chosen 的个人体验。他们所说的关于天选者的一切都是真实的。

Pēteris Caune 指出的问题select已有 2 年历史，但仍然没有官方修复。API 根本没有好的文档。已经多次指出（观看第 671 期），但仍然一无所获。他们花了将近 2 年的时间来解决这个问题，如果在显示 div 之前将其隐藏，则选择基本上不起作用overflow:hidden（并且您必须使用一个witdh:X%如果您不寻找问题，您基本上永远不会知道的选项）。

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

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

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

于 2013-06-21T23:32:16.670 回答
9

在 Select2 中有效但在 Chosen 中无效的一项功能是select在具有overflow: hiddenor的元素内部overflow: auto。

在此处输入图像描述

Chosen 的对应问题：https ://github.com/harvesthq/chosen/issues/86

于 2013-06-20T13:02:17.410 回答
6

我发现使用这两个插件的一些差异：

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

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

于 2013-06-24T15:51:35.413 回答
5

Select2 支持移动设备，而 Chosen专门在 iPod、iPhone 和移动 Android 上禁用自身。如果您想在移动设备上使用“扩展”选择框，这使您的选择变得容易。

于 2014-07-29T01:13:48.493 回答
5

我在桌面上使用 Select2 的体验很棒，但在触控移动设备上却大不相同，总有一些怪癖。例如，在带有 ics 和股票浏览器下拉菜单的 xperia st15i 上，由于键盘窃取焦点，它总是自行关闭。再次打开它的唯一方法是触摸菜单数十次，按住手指一秒钟以及其他巫术魔法。或者在下拉列表关闭时开始输入，有多少用户会解决这个问题？

selectize.js似乎比select2更平滑，但是它在选择值或输入时也会在移动设备上单独出现问题，以便出于某种原因将页面一直移至左侧。此外，在不支持溢出的较旧的 Android 2.x 设备上，无法选择超过几个顶部选项，因为键盘不会弹出。:(

仍然必须测试 Chosen，毕竟禁用移动设备可能不是一个坏主意，但最终好的旧下拉菜单始终无处不在。

更新：现在我也测试了 Chosen，它在一个方面更好：默认情况下它在移动设备上不起作用（太棒了！），但它有过滤单词的问题。例如，不在单词中间搜索，如果你使用  hack 进行对齐，它也会忽略完整的选项。回到绘图板。

于 2014-12-11T13:53:38.390 回答
1

为什么我选择 select2 而不是 Chosen

select2 具有的关键功能，没有其他控件具有自动神奇功能，是“清除所有”选择，控件右侧带有“x”。这是我的应用程序的杀手级功能。我不知道为什么其他选择标签增强库缺少此功能。

于 2016-05-23T12:22:01.410 回答
0

Select2 支持 AJAX 选择不支持

选择 2 的尺寸比选择的要重一些。

我切换到 Select2 因为没有官方支持 ajax 操作。

于 2015-06-16T17:07:33.607 回答