相信大家都用過下拉菜單，而用select控件來實(shí)現(xiàn)是最常用也是最簡單的方法。如下圖：
圖1
實(shí)現(xiàn)的代碼如下：
瀏覽器:<select id="UserAgent" style="width: 320px;"/>
<option value ="10">MSIE: Mozilla/4.0 (compatible; Windows ...</option>
<option value ="11">Firefox: Mozilla/5.0 (Windows; U; Windows ...</option>
<option value ="12">Opera: Opera/9.27 (Windows NT 5.2; U; ...</option>
<option value ="13">Safari: Mozilla/5.0 (Windows; U; Windows ...</option>
<option value ="14">Chrome: Mozilla/5.0 (Windows; U; Windows ...</option>
<option value ="15">Android: Mozilla/5.0 (Linux; U; Android 2.2;...</option>
<option value ="16">蘋果iPhone: Mozilla/5.0 (iPad; U; CPU OS ...</option>
<option value ="17">QQ瀏覽器: Nokia5700AP23.01/SymbianOS/9.1 ...</option>
<option value ="18">UC標(biāo)準(zhǔn): NOKIA5700/UCWEB7.0.2.37/28/999 ...</option>
</select>
今天我要實(shí)現(xiàn)一個(gè)功能，要把下拉選項(xiàng)分類，并且類別名用粗體隔開，讓人對菜單一目了然，迅速找到自己需要的選項(xiàng)。如下所示：
圖2
從圖2看到，下拉選項(xiàng)被分成兩部分：PC瀏覽器和手機(jī)瀏覽器。如果沒有這兩個(gè)粗體的類別名稱，那么所有類別就混在一起了，如圖1，用戶選擇起來就比較困難。
如下是實(shí)現(xiàn)代碼：
瀏覽器:<select id="UserAgent" style="width: 320px;"/>
<optgroup label="PC瀏覽器" style="font-weight:bold;">PC瀏覽器</optgroup>
<option value ="10">MSIE: Mozilla/4.0 (compatible; Windows ...</option>
<option value ="11">Firefox: Mozilla/5.0 (Windows; U; Windows ...</option>
<option value ="12">Opera: Opera/9.27 (Windows NT 5.2; U; ...</option>
<option value ="13">Safari: Mozilla/5.0 (Windows; U; Windows ...</option>
<option value ="14">Chrome: Mozilla/5.0 (Windows; U; Windows ...</option>
<optgroup label="手機(jī)瀏覽器" style="font-weight :bold;">手機(jī)瀏覽器</optgroup>
<option value ="15">Android: Mozilla/5.0 (Linux; U; Android 2.2;...</option>
<option value ="16">蘋果iPhone: Mozilla/5.0 (iPad; U; CPU OS ...</option>
<option value ="17">QQ瀏覽器: Nokia5700AP23.01/SymbianOS/9.1 ...</option>
<option value ="18">UC標(biāo)準(zhǔn): NOKIA5700/UCWEB7.0.2.37/28/999 ...</option>
</select>
關(guān)鍵是新增了這兩條代碼
<optgroup label="PC瀏覽器" style="font-weight :bold;">PC瀏覽器</optgroup>
<optgroup label="手機(jī)瀏覽器" style="font-weight :bold;">手機(jī)瀏覽器</optgroup>
通過這樣處理后，圖2的下拉菜單就比圖1的下拉菜單好很多了。
不過，遺憾的是，這個(gè)類別項(xiàng)是不可以選擇的。譬如上述例子里，我們不能選擇“PC瀏覽器”或“手機(jī)瀏覽器”這樣的頂級(jí)類別。不知道還有沒有其他辦法可以改進(jìn)這個(gè)菜單呢？
