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

标签 javascript jquery html css

我想在我的网页中尝试类似的东西,所以 below 需要在下拉列表或语句中查看。

  (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 或任何脚本来做到这一点?我们可以在下拉菜单中创建一个精确的外观吗?任何帮助都会很棒!

谢谢

最佳答案

我认为 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/

关于javascript - 如何在选择下拉菜单中设计有序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21638541/

相关文章:

html - 在 Internet Explorer 中使用 css 给第二列或第四列右侧边框

javascript - 使用 AJAX 在 jQuery 中插入多个数据

javascript - 使用 ng-model 动态禁用跨度

javascript - 提交后,b(array_name).map 不是函数 - ReactJS

jquery - Bootstrap 工具提示在我的 div 上不起作用

javascript - 如何绘制一个低不透明度的 rgba 圆,其中心恰好位于给定的 X 和 Y 尺寸

javascript - 如何在javascript中创建新行

javascript - 当网格打开时如何获取可拖动div的方向?

html - IE相当于-webkit-appearance?

html - 滚动 float