0

我在下拉列表中有一个像这样组织的数据树（但还有更多选项）：

 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)？

4

2 回答 2

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。

于 2012-07-13T21:15:05.067 回答
1

使用一组单选按钮（或复选框，如果要允许多个选择）而不是一个select元素，您可以像任何其他内容一样组织和设置样式，例如使用缩进和粗体。不过，它不会充当下拉菜单，但这实际上可以提高可用性和可访问性。

于 2012-07-14T06:28:25.293 回答