我們可以使用兩個 jQuery 插件來設置選擇框的樣式，即 Select2 和 Chosen。 Select2 和 Chosen 插件都改進了所選框的外觀并增強了框的行為，從而使它們變得用戶友好。此外，這兩個插件都可以用于多個選定的框以及單個選定的框。
選擇
JavaScript 插件，用于創建用戶友好的選擇框。 Chosen 在原型和 JQuery 版本中均可用。
被選中的特征
用戶友好
您的用戶不必費力地瀏覽一大堆可能性；他們可以簡單地以他們正在尋找的東西的名稱開頭。選擇替代方案只需按“Enter”鍵或單擊鼠標即可；不匹配的條目將從屏幕中刪除。
漸進增強
由于 Chosen 替換了默認的 HTML Select 字段，因此不再需要采取任何進一步的步驟來使其在不支持 JavaScript 的瀏覽器中運行。后端也不使用事件來管理數據。
簡單設置
只需將選定的文件包含在您的應用程序中并打開插件即可。選擇組、選定狀態、多重特征和瀏覽器選項卡順序都會自動受到選擇的尊重。
選擇2
Select2 為用戶提供了一個可自定義的選擇框，可用于搜索、遠程??數據集、標記、無限滾動和許多其他有用的屬性。
Select2的特點是
除了支持搜索、標記、遠程數據集、無限滾動和許多其他選項之外，它還為用戶提供了用戶可自定義的選擇框。
RTL 環境
它支持 RTL 環境，并具有超過 40 種語言的內置搜索功能。
阿賈克斯
您可以使用 Ajax 快速搜索一長串項目。
使用 Sass 和可選的 Bootstrap 3 主題創建完全可換膚的 CSS。
選擇的Javascript庫
要在 JQuery 中使用所選插件，我們必須添加一些庫，如下所示 –
chosen.jquery.min.js
選擇.min.css
還要激活所選框上的插件，我們必須添加如下代碼 –
$(“.chosen-select”).chosen()
登錄后復制
上面寫的這段代碼是JQuery中的腳本。
Select2 的 JavaScript 庫
要在 jQuery 中使用 select2 插件，我們必須添加一些庫，如下所示 –
select2.min.js
select2.min.css
還要激活所選框上的插件，我們必須添加如下代碼 –
$(“.chosen-select”).select2()
登錄后復制
上面寫的這段代碼是JQuery中的腳本。
我們已經了解了 selected 和 select2 的基礎知識，現在讓我們進入要點，即我們將在要點中觀察它們之間的區別。
Chosen 和 Select2 之間的區別
用于增強選擇框的兩個最常用的庫是 Choose 和 select2。 Chosen 比 Select2 更古老，并且支持 jQuery 和 Prototype。兩者都在更新中。 Select2 的靈感來自于 Chosen，并且僅支持 jQuery。
讓我們看看 selected 和 select2 之間的區別 –
加載數據
使用 selected 加載數據時，需要將整個數據集作為 DOM 中的選項標簽加載，因此處理小型數據集會受到限制。另一方面，Select2 使用函數的概念，動態查找結果，允許 select2 方法部分加載結果，從而消除了 selected 的缺點。
分頁需求
正如我們在上一點中討論的那樣，整個數據集由選擇者立即加載，這意味著沒有必要將數據劃分為各個部分，因此分頁概念沒有用處。另一方面，Select2 函數處理完整的數據集并部分加載所需的結果，并且它支持分頁的概念。當用戶滾動到當前數據的底部時，它將調用搜索功能，通過加載它來提供更多數據。
標記支持類型
選項標簽提供的唯一標記支持是所選內容支持的渲染文本，另一方面，Select2 提供了一個擴展點，可用于制作各種標記來表示結果。
添加結果
要添加結果，Chosen 和 select2 有兩個選項，靜態或動態，但 Choose 無法動態添加結果，而 select2 則執行完全相反的操作，并允許通過使用標記動態添加結果。
開發
Sass和CoffeeScript用于開發select，而開發select2則使用純JavaScript和CSS。
以上給出的差異是選擇和選擇之間的主要差異，還存在一些細微的差異，例如選擇的大小為 27KB，而選擇 2 的大小更大，為 57 KB。
注意 – Saas 和 CoffeeScript 已被發現使調試選擇變得更加困難。
Select2 公開支持移動設備，而 Chosen 則故意在某些設備上禁用自身。因此，如果您想在移動設備上使用“擴展選擇框”，建議使用 Select2。
結論
在本文中，我們了解到有兩個 JQuery 插件可以用來設置選擇框的樣式，即 Select2 和 Chosen。 Select2 和 Chosen 插件都改進了所選框的外觀并增強了框的行為，從而使它們變得用戶友好。 Select2和choose有很多不同之處，包括數據的加載過程、是否需要分頁、能否動態添加結果以及開發方式等。
以上就是用例子解釋Chosen和Select2的詳細內容，更多請關注www.92cms.cn其它相關文章！
