select 默認(rèn)的樣式并不適合每一個人,有時候你可能想自己控制它的樣式(在不同的設(shè)備和瀏覽器上保持一致),或者你可能還需要一些額外的功能。幸運(yùn)的是有很多功能強(qiáng)大的 jQuery 可以幫我們實(shí)現(xiàn)這些功能。
1. Chosen
Chosen 這個擴(kuò)展插件不僅重新定義了 select 元素的樣式,還提供了一些額外的功能,如在下拉框中搜索、多元素選擇以及高亮功能。
- 多選選項(xiàng)功能
- 通過搜索過濾功能
2. Select2
select2 也是一個功能強(qiáng)大、豐富的 select 替換/增強(qiáng)插件。它不僅重新定義了 select 元素的樣式,還提供了額外的功能:
- 單選/帶有 optgroups 的單選
- 多選
- 排序、搜索過濾
- 從遠(yuǎn)程數(shù)據(jù)源加載數(shù)據(jù)(如:通過API)
- 支持標(biāo)簽
3. jQuery Nice Select
這個插件是一個輕量級的 select 替換庫,jQuery Nice Select 通過重新定義的下拉框替換默認(rèn)的 select 元素。這個插件并沒有什么其他的特性,因?yàn)樗饕褪怯脕砜焖偬鎿Q默認(rèn)的 select 樣式。
4. Selectize
Selectize 是一個非常受開發(fā)者關(guān)注的插件,它不僅提供了一個好看的 select 列表樣式,還添加了一些額外的功能,如標(biāo)簽、遠(yuǎn)程數(shù)據(jù)綁定、以及動態(tài)下拉菜單。
5. Image Combo Box
Image Combo Box 是一個簡單的插件,允許你為 select 中的每一個選項(xiàng)定義一張圖片和一段描述。它主要用于展示圖片相關(guān)的選項(xiàng),所以當(dāng)你想為每一個選擇添加可視化展示時,它是一個好的選擇。
6. jQuery Searchable DropDown Plugin
Searchable DropDown 應(yīng)該算是一個能在網(wǎng)上找到的有點(diǎn)年頭的插件了。創(chuàng)建于 2012 (最近沒有更新),它的主要用途是把 select 列表轉(zhuǎn)換為一行的可搜索列表。
7. Multi-select Combo Box
這個插件同我們提到的其他的有點(diǎn)不同,它同時操作兩個或多個選擇元素,你可以在列表之間來回移動元素。
8. jQuery Selectbox
jQuery Selectbox 也是一個比較老的 select 替換插件。然而,同其他插件添加大量的功能不同,這個插件的目的是重新控制樣式,而不管任何其他功能。
9. Multiselect.js
另一個 jQuery 驅(qū)動的插件。可以快速輕松的創(chuàng)建基于列表的多選功能,你可以從它的演示中看到它是多么有用。
10. JQuery SumoSelect
SumoSelect 具有你替換 select 所有的功能。這個插件即處理單選又處理多選元素,搜索和過濾,以及多種選項(xiàng)和事件。
11. jQuery UI Selectmenu
這個插件有點(diǎn)不同。與其他獨(dú)立插件,如 chosen 和 select2 不同,這個插件是 jQuery UI 框架的一部分,叫做 selectmenu。
12. jQuery Filterable Bootstrap Select
Filterable Bootstrap Select 使用 Bootstrap 3 擴(kuò)展了默認(rèn)的 select 樣式。這個插件與其他資源綁定,如 FontAwesome 作 icon,jQuery LiveFilter 作過濾機(jī)制,以及 jQuery tabcomplete 作為預(yù)測。
via: site-point
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站,并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底,使您的網(wǎng)站無需額外費(fèi)用,即可穩(wěn)步提升排名至首頁。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。
