select往下拉菜单option文本粗体的完成方式

2021-03-11 16:17 jianzhan

以下图:

 

 图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">iPhoneiPhone: 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>

      今日我要完成1个作用,要把往下拉选项归类,而且种别名用粗体分隔,令人对菜单1目了然,快速寻找自身必须的选项。以下所示:

图2

      从图2看到,往下拉选项被分为两一部分:PC访问器和手机上访问器。假如沒有这两个粗体的种别名字,那末全部种别就混在1起了,如图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">iPhoneiPhone: 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访问器”或“手机上访问器”这样的顶级种别。不知道道也有沒有别的方法能够改善这个菜单呢?