如何在选择下拉菜单中设计有序列表

时间:2014-02-07 21:57:54

标签: javascript jquery html css

我想在我的网页中尝试类似这样的内容,因此下面需要完全查看下拉列表或声明。

  (a). Category1
          element1
          element2
          etc..

  (b).Category2
          element1
          element2
          etc..

这就是我尝试的方式,但它在正常的下拉列表菜单中显示我,而不是像上面那样。

<html>
 <body>
  <select>
    <ol>
     <option value=1><li>Category1</li></option>
     <option value =2><li>element1</li></option>
     <option value =3><li>element2</li></option>
     <option value =4><li>etc...</li></option>
     <option value =5><li>Category2</li></option>
     <option value =6><li>element1</li></option>
     <option value =7><li>element2</li></option>
     <option value =8><li>etc...</li></option>
    </ol>
   </select>
</body>
</html>

任何建议或想法,我如何使用HTML CSS或任何脚本执行此操作?我们可以在下拉菜单中创建一个精确的外观吗?对此的任何帮助都会很棒!

由于

1 个答案:

答案 0 :(得分:4)

我认为optgroup标签可能是您的标签吗?

类似的东西:

<select>
    <optgroup label="Category 1">
        <option value="2">element1</option>
        <option value="3">element2</option>
        <option value="4">etc...</option>
    </optgroup>
    <optgroup label="Category 2">
        <option value="5">element1</option>
        <option value="6">element2</option>
        <option value="7">etc...</option>
    </optgroup>
</select>

演示:http://jsfiddle.net/z5KrN/