select 默認(rèn)的樣式并不適合每一個(gè)人,有時(shí)候你可能想自己控制它的樣式(在不同的設(shè)備和瀏覽器上保持一致),或者你可能還需要一些額外的功能。幸運(yùn)的是有很多功能強(qiáng)大的 jQuery 可以幫我們實(shí)現(xiàn)這些功能。

1. Chosen

1474632054chosen

Chosen 這個(gè)擴(kuò)展插件不僅重新定義了 select 元素的樣式,還提供了一些額外的功能,如在下拉框中搜索、多元素選擇以及高亮功能。

Website / GitHub

2. Select2

1474632090select2

select2 也是一個(gè)功能強(qiáng)大、豐富的 select 替換/增強(qiáng)插件。它不僅重新定義了 select 元素的樣式,還提供了額外的功能:

Website / Demos / Github

3. jQuery Nice Select

1474632122jquery_nice_select

這個(gè)插件是一個(gè)輕量級(jí)的 select 替換庫(kù),jQuery Nice Select 通過(guò)重新定義的下拉框替換默認(rèn)的 select 元素。這個(gè)插件并沒(méi)有什么其他的特性,因?yàn)樗饕褪怯脕?lái)快速替換默認(rèn)的 select 樣式。

Website & Demos / Github

4. Selectize

Selectize 是一個(gè)非常受開(kāi)發(fā)者關(guān)注的插件,它不僅提供了一個(gè)好看的 select 列表樣式,還添加了一些額外的功能,如標(biāo)簽、遠(yuǎn)程數(shù)據(jù)綁定、以及動(dòng)態(tài)下拉菜單。

Website & Demos / GitHub

5. Image Combo Box

 

1474632183combo_box_dropdown

Image Combo Box 是一個(gè)簡(jiǎn)單的插件,允許你為 select 中的每一個(gè)選項(xiàng)定義一張圖片和一段描述。它主要用于展示圖片相關(guān)的選項(xiàng),所以當(dāng)你想為每一個(gè)選擇添加可視化展示時(shí),它是一個(gè)好的選擇。

Website / Demo / Github

6. jQuery Searchable DropDown Plugin

1474632217jquery_searchable_dropdown

Searchable DropDown 應(yīng)該算是一個(gè)能在網(wǎng)上找到的有點(diǎn)年頭的插件了。創(chuàng)建于 2012 (最近沒(méi)有更新),它的主要用途是把 select 列表轉(zhuǎn)換為一行的可搜索列表。

Website / Demo

7. Multi-select Combo Box

1474632269jquery-select-list-actions

這個(gè)插件同我們提到的其他的有點(diǎn)不同,它同時(shí)操作兩個(gè)或多個(gè)選擇元素,你可以在列表之間來(lái)回移動(dòng)元素。

Website / Demo / GitHub

8. jQuery Selectbox

1474632287jquery-selectbox

jQuery Selectbox 也是一個(gè)比較老的 select 替換插件。然而,同其他插件添加大量的功能不同,這個(gè)插件的目的是重新控制樣式,而不管任何其他功能。

Website & Demo / GitHub

9. Multiselect.js

1474632314jquery-multi-select

另一個(gè) jQuery 驅(qū)動(dòng)的插件。可以快速輕松的創(chuàng)建基于列表的多選功能,你可以從它的演示中看到它是多么有用。

Website / GitHub

10. JQuery SumoSelect

1474632333jquery-sumo-select

SumoSelect 具有你替換 select 所有的功能。這個(gè)插件即處理單選又處理多選元素,搜索和過(guò)濾,以及多種選項(xiàng)和事件。

Website / Demos / GitHub

11. jQuery UI Selectmenu

1474632350jquery-ui-selectmenu

這個(gè)插件有點(diǎn)不同。與其他獨(dú)立插件,如 chosen 和 select2 不同,這個(gè)插件是 jQuery UI 框架的一部分,叫做 selectmenu。

Website & Demo

12. jQuery Filterable Bootstrap Select

1474632372jquery_bootstrap_select

Filterable Bootstrap Select 使用 Bootstrap 3 擴(kuò)展了默認(rèn)的 select 樣式。這個(gè)插件與其他資源綁定,如 FontAwesome 作 icon,jQuery LiveFilter 作過(guò)濾機(jī)制,以及 jQuery tabcomplete 作為預(yù)測(cè)。

Demo / GitHub

via: site-point

 

  哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站,并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底,使您的網(wǎng)站無(wú)需額外費(fèi)用,即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。