jQuery选择框组件–选择与Select2

最新推荐文章于 2024-06-09 10:15:35 发布

dingshi7798

最新推荐文章于 2024-06-09 10:15:35 发布

阅读量209

点赞数

文章标签： javascript 移动开发 git ViewUI

MartínMartínez和Chris Perry对本文进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

您是否曾经从事过某个项目，似乎在视觉上有些不对劲？也许项目快要完成了，但是某些元素看起来不太好？这些可能很小，但是却有所作为。

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

在本文中，我将面对面地介绍这两个插件，并比较它们的功能和用例，以便您可以明智地选择哪个最适合您。

安装

无论选上，并选择二通过GitHub上可用。这意味着您可以克隆相应的存储库并获取所需的文件。


git clone https://github.com/harvesthq/chosen.git
git clone https://github.com/select2/select2.git

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


bower install jquery
bower install select2
bower install chosen

否则，请从您选择的CDN中获取文件（例如CDNJS ），然后以通常的方式将其包括在页面中。这是我在下面的模板中所做的事情，您可以使用这些模板以及教程中的示例进行操作。

选择

<!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="//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>

选择2

<!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="//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>

项目是否得到了积极维护？

您可以通过访问其GitHub页面了解到，Chosen插件的开发不像以前那样活跃，Chosen的最新版本可以追溯到2014年2月6日。这并不是说该库已被废弃—到目前为止从中！而是开发人员将其放到了想要的位置，并且它仍然是一个可靠而强大的插件。

另一方面，与Select2进行对比，差异是显而易见的。该库的开发正在全速进行，它最近发布了正式的第四版（4.0.0）。这意味着要添加新功能，而不推荐使用和/或删除其他功能。

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

如果您键入“ Select2”，然后将其与“选择”进行对比，则会发现Select2插件周围似乎有更多活动。您还将看到它具有许多集成，例如与AngularJS和Ruby on Rails的集成。

选择框和占位符

Select2和Chosen更改了简单选择框和多个选择框的显示方式。

在带有纯HTML的多个选择框中，用户可以看到列表中的一些可用选项。这在视觉上没有吸引力，因此必须对此视图进行更改。获选并选择二中删除了“列表视图”和选项列表，当你点击选择框里面就会出现。只有这样，您才能进行选择。

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

通过Select2，可以更轻松地取消选择已经选择的选项。打开下拉列表后，您可以单击任何选定的元素以取消选择它们。 Chosen尚未实现此功能。

无论选上，并选择二支持占位符文本单个和多个选择框。

选择数量有限

有时，在多个选择框中，您需要限制用户选择的选项数量。使用选择和优势选择二是，你可以改变选择的数量非常容易。


max_selected_options: 2 // Chosen Plugin


maximumSelectionLength: 2 // Select2 Plugin

您可以限制使用两个插件都可以从多选框选择的选择数量，尽管值得注意的是，该功能的选择版本更高级。达到限制后，如果尝试选择其他选项，则会调用一个事件。

在此示例中，要求用户选择两周中最有生产力的两天。当他们尝试选择第三天时，Chosen将呼叫一个事件。我设置了选择，以添加一条alert显示已达到限制：

见笔获选VS选择二：选择数量有限的SitePoint（ @SitePoint上） CodePen 。

响应式设计

人们会在各种设备上看到您的页面，因此与您网站的其他组件一样，选择框也应该有所响应。无论选上，并选择二支持设置width以百分比和功能几乎是他们两人的相同。这有助于创建考虑屏幕大小或浏览器窗口宽度的响应式选择框。

选择和选择2关于此功能的唯一区别是代码。您可以在HTML的select标签内声明Select2的width 。在下面查看它，以了解使用Chosen和Select2使选择框快速响应并在视觉上更好的选择有多方便。

<!-- Chosen - HTML -->
<select class="responsiveChosen">
  ...
</select>


// Chosen - JavaScript
$(".responsiveChosen").chosen({width: "50%"});

<!-- Select2 - HTML -->
<select class="responsiveSelect2" style="width:50%">
  ...
</select>


// Select2 - JavaScript
$(".responsiveSelect2").select2();

其他类似功能

Chosen和Select2具有其他共同的功能，但我想看看我发现很有趣的三个功能：禁用结果，隐藏的搜索框和从右到左（RTL）支持。

禁用结果

其中最有趣的是禁用结果。通过该选项，选上的，并选择二亮点启用的选项。您可以看到禁用的选择，但不能选择它们。通常将设置禁用结果，以防止用户在满足某些其他条件之前选择选项。此功能将您的选择框变成功能强大的工具，并且如果您学习如何根据需要使用它，则可以增加与用户的互动。

为了让插件知道您已经激活了禁用结果，请将属性disabled="disabled"到将使用此功能的option标签中。

<option value="1" disabled="disabled">Product A</option>

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

见笔残疾人结果：获选VS选择二由SitePoint（ @SitePoint上） CodePen 。

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

...
<option value="1">Yes</option>
<option value="0">No</option> <!--2 options-->
...


// Chosen - JavaScript
...
disable_search_threshold: 3
...

相同的逻辑适用于Select2 ，但是唯一的变化是术语，而不是disable_search_threshold它称为minimumResultsForSearch 。


// Select2 - JavaScript
...
minimumResultsForSearch: 3
...

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


minimumResultsForSearch: Infinity

从右到左（RTL）支持

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

选择框和选择框2在选择框中都支持从右向左技术。它们唯一的区别是Select2需要您在JavaScript文件中声明对RTL的支持，而在选择中，您只需在HTML中添加selected chosen-rtl类和选定的Chosen类即可。

为什么选择Select2而非选择

尽管Select2受到选择的启发，并具有选择的大多数功能，但其贡献者并没有止步于此。他们为选择框内置了一些最酷的功能，包括编程访问，模板化，禁用模式，标记和标记化。它还支持AJAX 。

程序访问

程序访问将选择框带入另一个层次。将它们与多个选择框结合使用非常有用。您可以使用JavaScript根据您的规则添加作用于这些选择框的按钮。

如果“多重选择”框中的某些选项相互之间具有逻辑链接，并且根据您的观察，这些“链接”选项很有可能会从很多用户中选择，那么使用单击。

<select class="progControlSelect2" multiple="true">
  <option value="js">JavaScript</option>
  <option value="ph">PHP</option>
  <option value="jv">Java</option>
  <option value="rb">Ruby</option>
  <option value="sw">Swift</option>
  <option value="oc">Objective C</option>
  <option value="py">Python</option>
</select>
<form>
  <input type="button" class="iOSSelect2" value="Set iOS Technologies">
        ...
</form>


var $progControl = $(".progControlSelect2").select2({
  placeholder: "What technologies do you use most of the time" //placeholder
});
$(".iOSSelect2").on("click", function () { 
  $progControl.val(["sw", "oc"]).trigger("change"); 
});

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

见笔编程方法-选择二由SitePoint（ @SitePoint上） CodePen 。

标记

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

如果选择范围很大，并且您不能在选项列表中键入所有选择，则标记也非常方便。启用标记后，用户在列表中找不到他们的选择，它会“推”他们以创建他们选择的标记。

但是，在使用标记时要小心，因为“恶意”用户输入的无效标记可能与选择框的目标不符，因此可能会被滥用。

要启用标记，应将tags选项设置为true 。


$(".taggingSelect2").select2({
  ...
  tags: true,
});

请参阅CodePen上的Pen 选择与Select2：通过SitePoint（ @SitePoint ）进行标记。

代币化

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

借助Select2，您可以使用所需的任何字符来创建令牌分隔符。在下面的实例中为四个令牌隔板被使用： / ， , ， ; 和" " （空格）。


$(".tokenizationSelect2").select2({
    placeholder: "Your favourite car", //placeholder
    tags: true,
    tokenSeparators: ['/',',',';',' '] 
});

通过键入一个新选项来尝试它，然后输入一个分隔符来选择它并将其添加到选项列表中：

请参阅CodePen上的Pen Select2 –通过SitePoint（ @SitePoint ）进行标记化。

模板化

Select2最强大的功能之一就是模板化。通过模板化，我们可以自定义Select2显示的组件外观。此功能可用于将option标签提供的最小输入与图像或其他组件合并，以为用户创建视觉显示。

这个例子结合了Bootstrap的Glyphicons的 Select2模板：

请参见CodePen上的由SitePoint（ @SitePoint ）进行Pen Select2模板绘制。

结论

尽管Chosen中有一些不错的选项，但是Select2在与选择框一起使用的可用功能方面提供了更多功能。如果将选择结合在网站的“流程”中，则选择是一个不错的选择，但是如果您想访问更高级的功能，则Select2是更好的选择。

我强烈建议您使用Select2；它比选择的更新频率更高，并且错误更少。我发现有关Select2的非常有用的一件事是它的文档。阅读时，您可以在项目中即时使用Select2组件。

如果您在选择Chosen或Select2方面有过好坏的经历，请在下面的评论部分中告诉我。

From: https://www.sitepoint.com/jquery-select-box-components-chosen-vs-select2/

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫