html - 选择 optgroup 标题作为选项

Question

我在下拉列表中有一个像这样组织的数据树(但有更多选项):

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

我希望较大的类别(披萨、饮料)显示为 optgroup，但我希望能够在下拉列表中选择一个 optgroup 作为选项。我看多处都是说optgroups只是用来分组的，不能选中。

因为我还想要多于一层的缩进，以允许下拉菜单看起来尽可能接近上面的示例——也许 optgroups 不是可行的方法，而是一种 css 解决方案。在 firefox 中，我可以通过向选项添加样式并使它们变为粗体和/或具有左填充来做我想做的事情，但在 webkit 中，我可以在下拉列表中更改选项的唯一属性是它们的颜色。

有谁知道我如何在 webkit (chrome/safari) 和 firefox 中使用 optgroups、css 或其他任何东西实现这种效果 ---(我目前并不真正关心 IE)？

Answer 1

您可能只想使用低技术:

<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”的其他本土解决方案。