如下圖：

 圖1

      實現的代碼如下：

瀏覽器:<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標準: NOKIA5700/UCWEB7.0.2.37/28/999 ...</option>
</select>

      今天我要實現一個功能，要把下拉選項分類，并且類別名用粗體隔開，讓人對菜單一目了然，迅速找到自己需要的選項。如下所示：

圖2

      從圖2看到，下拉選項被分成兩部分：PC瀏覽器和手機瀏覽器。如果沒有這兩個粗體的類別名稱，那么所有類別就混在一起了，如圖1，用戶選擇起來就比較困難。

      如下是實現代碼：

瀏覽器:<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="手機瀏覽器" style="font-weight :bold;">手機瀏覽器</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標準: NOKIA5700/UCWEB7.0.2.37/28/999 ...</option>
</select>

關鍵是新增了這兩條代碼

<optgroup label="PC瀏覽器" style="font-weight :bold;">PC瀏覽器</optgroup>

<optgroup label="手機瀏覽器" style="font-weight :bold;">手機瀏覽器</optgroup>

      通過這樣處理后，圖2的下拉菜單就比圖1的下拉菜單好很多了。

      不過，遺憾的是，這個類別項是不可以選擇的。譬如上述例子里，我們不能選擇“PC瀏覽器”或“手機瀏覽器”這樣的頂級類別。不知道還有沒有其他辦法可以改進這個菜單呢？