[jQuery Plugin]透過jqSelectable,讓您的下拉式選單,更易閱讀及選取

摘要:[jQuery Plugin]透過jqSelectable,讓您的下拉式選單,更易閱讀及選取

如標題所示,在此要介紹一款蠻實用的jQuery Plugin;如果您的選項不是那麼多的話,此plugin或許就很適用了,反之,如果您的選項非常多,那,也許您就需要考慮其它plugin了!

 


首先,先看一般使用下拉式選單時的情況(如下圖所示):

這是很單純的下拉式選單的用法,但,我們都知道,它有個缺點,就是,比較難找到要想要的選項!

 


沒錯,尤其是當選項的候選值愈多時,用凡人的肉眼(指小弟我),真的很難馬上找到想要挑選的值!

所以,如果這資料本身是有規則性的,不仿將它分類(群)一下,我想,分類後應該就會比較好找了吧?!

這時,select tag中的optgroup tag就派上用場了!實踐後的效果如下圖所示:

如此一來,是不是比較好找了呢?!

(假設我要找的選項值在"奶茶類"中,事實上,我只要很快地,將scrollbar下拉到該分類中,就可以更快地找到我要的選項了!)

 


但是,有沒有辦法讓凡人的肉眼,可以更快地,且不透過滾動軸(因為要一直往下拉也是很麻煩地),更方便地找到要挑選的值呢?!

答案當然是肯地的,因為這就是本次的主題了!只要透過jqSelectable這外掛,就可以很輕鬆地完成這需求了(如下圖所示)!

如此一來,是不是可以更方便地找到要挑選的值了呢?!laugh

 


套件名稱:jqSelectable

官網位置:http://code.google.com/p/jqselectable/

下載位置:jqselectable.1.3.2

 

使用方式:

$(object).jQselectable();

 

實際效果: