选择一个OPTGROUP标题作为可选项

我有一个下拉列表（但有很多很多的选项）举办像这样的数据的树：选择一个OPTGROUP标题作为可选项

pizza 
    pizza.mediterranean 
    pizza.veggie 
    pizza.meatlover 
drinks 
    drinks.soda 
    drinks.soda.pepsi 
    drinks.soda.coke 
    drinks.beer 
    drinks.water

我想更大的类别（比萨，饮品）至显示为optgroups，但我希望能够在下拉列表中选择optgroup作为选项。我读过的多个地方是optgroups仅用于分组，不能被选中。

因为我还想要多个级别的缩进以允许下拉看起来尽可能接近上面的示例 - 可能optgroups不是要走的路，而是一个css解决方案。在Firefox中，我可以通过向选项添加样式并使其变为粗体和/或具有左填充来做到我想要的操作，但它似乎在webkit中，我可以在下拉菜单中更改选项的唯一属性是它们的颜色。

有没有人知道我可以在webkit（chrome/safari）和firefox ---（我现在不太在乎IE）时使用optgroups，css或其他任何东西来达到这种效果？

来源

2012-07-13 hackartist

你可能只想去低科技：

<select> 
<option>Root</option> 
<option>&nbsp;&nbsp;Second level</option> 
<option>&nbsp;&nbsp;&nbsp;&nbsp;Third level</option> 
</select>

你打的，你可以用一个真正的选择做了限制。从概念上讲，这些选择部件是由操作系统绘制的（尽管一些浏览器 - firefox - 有自己的实现），所以样式选项是有限的。

有很多很好的选择替代品。我最熟悉的是jqueryui的autocomplete。它快速灵活，您可以根据自己的喜好设计风格。人们可以想象使用jQuery或其他工具包的其他本土解决方案 - 或简单的'ol JavaScript。

来源

2012-07-13 21:15:05 Julian

这是让它在所有浏览器上都能正常工作的绝对方式，但它不允许任何样式使事物像一个optgroup一样大胆...... – hackartist 2012-07-13 21:37:18

点头，添加了一些其他想法来回答更多高级选项.. – Julian 2012-07-13 21:52:13

使用一组单选按钮（或复选框，如果几个选择是被允许），而不是一个select元素，您可以组织和他们的风格像任何其他内容，例如与缩进和粗体。但它不会作为下拉菜单，但这实际上可以提高可用性和可访问性。

来源

2012-07-14 06:28:25

选择一个OPTGROUP标题作为可选项

回答

相关问题