>如果您的項目包含不吸引人的選擇框，並且您想向其添加更多功能，則會發現選擇和Select2非常有用。這是兩個jQuery插件，可幫助您設計選擇框以改善其外觀，自定義其行為並使它們更友好。
>>在本文中，我將把這兩個插件正對準，並比較它們的功能和用例，以便您可以做出最適合您的選擇。
鑰匙要點
否則，從您選擇的CDN（例如CDNJ）中獲取文件，並以通常的方式將它們包含在頁面中。這是我在下面的模板中所做的，您可以使用此操作以及教程中的示例。
<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>
對比了，差異很明顯。該圖書館的開發將全力以赴，最近發布了其官方的第四版（4.0.0）。這意味著正在添加新功能，而其他功能則被棄用和/或刪除。
>另一個有用的指標可能是在堆棧溢出上使用這些標籤的問題數量。您可以在這裡親自嘗試：http：//stackoverflow.com/tags
>如果您輸入“ select2”，然後對比“選擇”，您會發現Select2插件周圍似乎還有更多活動。您還會看到它具有許多集成，例如AngularJS和Ruby在Rails上。
選擇盒子和占位符
>您可以使用兩個插件搜索您的選項。只需單擊框內，然後輸入您選擇的第一個字符，然後根據您的搜索實時出現結果。
select2使得更容易取消選擇已經選擇的選項。打開下拉列表時，您可以單擊任何選定的元素以取消選擇。選定尚未實現此功能。
>
選擇的單個和多個選擇框的選擇和Select2支持佔位符文本。選擇數量有限
>有時在一個多個選擇框中，您需要限制“選項”用戶選擇的數量。使用選擇和Select2的優點是您可以非常簡單地更改選擇數量。
>您可以限制可以從兩個插件的多選盒中選擇的選擇數量，儘管值得注意的是，選擇此功能的版本更為先進。達到限制後，如果您嘗試選擇一個調用事件的其他選項。 >請參閱Pen的選擇數量有限的選擇：codepen上的sitepoint（@sitepoint）選擇的選擇。 >人們會在各種設備上看到您的頁面，因此選擇框，就像您網站的其他組件一樣，應該響應能力。所选和Select2支持設置寬度的百分比都具有一個百分比，並且兩者的功能幾乎相同。這有助於創建響應式選擇的框，以考慮屏幕尺寸或瀏覽器窗口寬度。 >選擇和Select2對此功能的唯一區別是代碼。您可以在HTML中聲明Select2的select標籤。在下面查看它，以了解使Select Select Box響應能力和視覺上更好的方便。
為了讓插件知道您已經激活了禁用的結果，請在選項標籤中添加屬性=“ disabled”，您將在其中使用此功能。
在此選定的示例中，用戶只能在其地理位置中選擇可用的選項，但是即使它們不可用，它們也可以看到其他選項： 上的禁用結果。
> >以不同的字母為不同的語言編寫了大量網站，除此之外，其中一些語言是從另一個方向讀取的。建議精選的框應根據這些語言的規則進行調整，並將其方向從LTR（從左到右）轉移到RTL。這可以改善用戶體驗，並提高您網站對該地區用戶的可用性。 選擇和Select2在Select Box中支持左右技術。他們唯一的區別是Select2需要您在JavaScript文件中聲明RTL支持，與此同時，您只需將所選的RTL類與HTML中的選定選擇類一起添加。 >
>
如果選擇範圍很大，並且您無法在選項列表中鍵入所有選擇時，
>
>將標籤設置為true後，可用包含令牌分隔符的選項可用。輸入標籤的名稱後，只需鍵入指定的令牌分離器之一。然後將標籤作為選項列表中的選擇輸入。令牌分離器是通過從鍵盤中鍵入字符來創建標籤的快捷方式。 >在Select2的幫助下，您可以使用所需的任何字符創建令牌分離器。在下面的示例中，使用了四個令牌分離器： /，，，;和“”（Space）。 >通過鍵入一個新選項，然後是一個分隔符字符來選擇它並將其添加到選項列表：
結論 >
>
以實現Select2，您首先需要在項目中包括Select2 CSS和JavaScript文件。然後，您可以使用$（“ MySelectBox”）。 select2（）在任何選擇框上初始化select2;命令。您還可以通過將選項傳遞到select2（）函數來自定義Select2的行為。 ，而從技術上講可以同時使用和select2在同一項目中，通常不建議進行。這兩個插件旨在增強選定框的功能，並將它們一起使用可能導致衝突和意外行為。最好選擇最適合您需求的一種。 select2和選擇允許通過CSS進行廣泛的自定義。您可以通過在您自己的CSS文件中覆蓋其默認樣式來更改外觀的顏色，字體，尺寸和其他方面。 >我可以將所選或select2與Angular或React這樣的框架使用？ 選擇的是內置的搜索功能。當您在選擇框中選擇的初始化時，會自動添加搜索框。用戶可以在此框中鍵入此框以過濾選擇框中的選項。 響應式設計
<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>
<!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></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>
<!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="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>
</body>
</html>
>選擇和Select2具有其他共同的功能，但是我想查看我發現有趣的三個功能：殘疾人結果，隱藏的搜索框以及左右（RTL）支持。
最有趣的是殘疾人結果。使用此選項集，選擇和Select2突出顯示了已啟用的選項。您可以看到殘疾人的選擇，但無法選擇它們。通常設置禁用結果，以防止用戶選擇該選項，直到滿足其他條件為止。此功能將您的選擇框變成一個功能強大的工具，如果您根據需要學習如何使用它，它會增加與用戶的互動。
<span>max_selected_options: 2 // Chosen Plugin
</span>
<span>maximumSelectionLength: 2 // Select2 Plugin
</span>
<!-- Chosen - HTML -->
<select >
...
</select>
<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>
>左右（RTL）支撐
> select2受到選擇的啟發，並且具有所選的大多數功能，但其貢獻者並沒有止步於此。它們構建了一些最酷的功能，用於選擇框，包括程序化訪問，模板，禁用模式，標記和令牌化。它還支持Ajax。
程序化訪問將選擇框帶到另一個級別。它們非常有用，與多個精選框結合在一起。您可以使用JavaScript添加根據規則在這些選擇框上作用的按鈕。
bower <span>install jquery
</span>bower <span>install select2
</span>bower <span>install chosen
</span>
<!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="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>
</body>
</html>
標記是Select2的另一個功能，它使Select框更強大，並擴展了普通選擇框的限制。它允許用戶添加尚未在選項列表中的新選擇。 <!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="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>
</body>
</html>
tokenization
<span>git clone https://github.com/harvesthq/chosen.git
</span><span>git clone https://github.com/select2/select2.git
</span>
> Select2最強大的功能之一是模板。模板使我們能夠自定義Select2顯示的組件的外觀。此功能可用於合併選項標籤提供的最小輸入與圖像或其他組件為用戶創建視覺顯示。 >儘管其中選擇有一些不錯的選擇，但是Select2提供了更多的可用功能，可與Select Box一起使用。如果您將其組合在網站的“流”中，則選擇是一個不錯的選擇，但是如果您想訪問更高級的功能，那麼Select2是更好的選擇。
>我強烈建議使用select2;它的更新頻率比所選擇的頻率更高，並且錯誤更少。我發現對Select2的文檔非常有幫助。在閱讀它時，您可以隨時使用項目中的select2組件。 >如何在項目中實現select2？
>我可以在同一項目中使用所选和select2嗎？
我如何自定義Select2的外觀並選擇？
如何使用Select2？非常適合處理大型數據集的AJAX支持。您可以將Select2配置為隨著用戶類型即時獲取數據，從而阻止需要預先加載所有數據。與大型數據集一起工作時，這可以顯著提高性能。
>如何使用select2和選擇多個選擇？
select2和選擇支持多個選擇。您可以通過在選擇框中添加多個屬性來啟用此功能。當啟用多個選擇時，用戶可以從選擇框中選擇多個選項。 >我可以使用移動設備選擇或選擇2使用？
我如何處理Select2並選擇的事件？您可以聆聽和回應的事件。例如，您可以在用戶選擇時聆聽更改事件以運行功能。您可以使用jQuery中的.on（）方法來連接事件偵聽器。
>
以上是jQuery選擇框組件 - 選擇vs select2的詳細內容。更多資訊請關注PHP中文網其他相關文章！
