Question

如果您的目标只是针对Firefox，Opera和Chrome，而不是IE，并且您只针对现代浏览器（在过去一年中发布），那么创建多级缩进选项的最佳方法是什么？选择不使用optgroups？也就是说，当您希望父选项仍然可以选择时，以及子项？

<select>
    <option>
    <option>
        <option>
        <option>
        <option>
    <option>
        <option>
        <option>
            <option>
            <option>
            <option>
        <option>
        <option>
    <option>
    <option>
</select>

最好，虽然我不知道它是否真的可能，但是在选项级别之间有实际的父/子关系，但如果不是，至少有一种方法可以让它看起来像那样，哪里有三种浏览器的用户体验相似吗？

Answer 1

使用适当数量的<option>（分别为字符代码160）为 文字添加前缀。

Answer 2

添加特殊字符肯定有效，但这很快就会变得混乱。

另一种“语义”替代方法是使用<optgroup>。这里明显的限制是你不能将它们嵌套在一起，所以你只能使用简单的单级分组。

您可以通过像这样命名的optgroup命名来创造性地克服这一限制：

<select>
  <optgroup label="Favorite Food">
    <option value="salad">Salad</option>
    <option value="pizza">Pizza</option>
  </optgroup>
  <optgroup label="Favorite Food &gt; Pizza Type">
    <option value="pepperoni">Pepperoni</option>
    <option value="cheese">Cheese</option>
  </optgroup>
</select>

在<select>？</select>中创建缩进的最佳现代方法

2 个答案: