相信大家都用過下拉列表，而用select控制項來實現是最常用也是最簡單的方法。如下圖：
圖1實現的**如下：
瀏覽器:
msie: mozilla/4.0 (compatible; windows ...
firefox: mozilla/5.0 (windows; u; windows ...
opera: opera/9.27 (windows nt 5.2; u; ...
safari: mozilla/5.0 (windows; u; windows ...
chrome: mozilla/5.0 (windows; u; windows ...
android: mozilla/5.0 (linux; u; android 2.2;...
蘋果iphone: mozilla/5.0 (ipad; u; cpu os ...
qq瀏覽器: nokia5700ap23.01/symbianos/9.1 ...
uc標準: nokia5700/ucweb7.0.2.37/28/999 ...
今天我要實現乙個功能，要把下拉選項分類，並且類別名用粗體隔開，讓人對選單一目了然，迅速找到自己需要的選項。如下所示：
圖2從圖2看到，下拉選項被分成兩部分：pc瀏覽器和手機瀏覽器。如果沒有這兩個粗體的類別名稱，那麼所有類別就混在一起了，如圖1，使用者選擇起來就比較困難。
如下是實現**：
瀏覽器:
pc瀏覽器
msie: mozilla/4.0 (compatible; windows ...
firefox: mozilla/5.0 (windows; u; windows ...
opera: opera/9.27 (windows nt 5.2; u; ...
safari: mozilla/5.0 (windows; u; windows ...
chrome: mozilla/5.0 (windows; u; windows ...
手機瀏覽器
android: mozilla/5.0 (linux; u; android 2.2;...
蘋果iphone: mozilla/5.0 (ipad; u; cpu os ...
qq瀏覽器: nokia5700ap23.01/symbianos/9.1 ...
uc標準: nokia5700/ucweb7.0.2.37/28/999 ...
點這裡看**執行效果
關鍵是新增了這兩條**
pc瀏覽器
手機瀏覽器
通過這樣處理後，圖2的下拉列表就比圖1的下拉列表好很多了。
不過，遺憾的是，這個類別項是不可以選擇的。譬如上述例子裡，我們不能選擇「pc瀏覽器」或「手機瀏覽器」這樣的頂級類別。不知道還有沒有其他辦法可以改進這個選單呢？
標籤: html
加入本站qq群（312716741），交流分享**建設、優化、seo技術。。。
分享到：
qq空間
人人網複製**
jquery操作下拉列表select
jquery獲取select選擇的text和value 語法解釋 1.select id change function 為select新增事件，當選擇其中一項時觸發 2.var checktext select id find option selected text 獲取select選擇的tex...
js控制select 下拉列表
通過js控制select下拉列表 通過js獲取select下拉列表的值class form control 1option events 利用以下函式，可以取到被選中的option的位 getselected function 或利用此函式可以獲取被選中的option的值 getselected f...
JQuery操作Select下拉列表
1我被選中了2 查詢被選中的option中的內容當然也可以用 alert sel option selected text 稍微解釋一下 select name sel option selected 表示具有name 屬性，並且該屬性值為 sel 的select元素 裡面的具有selected 屬...