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

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>