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中文網其他相關文章！