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