在下拉列表/选择中嵌套optgroup

Question

我创建了一个客户c＃DropDownList控件，该控件可以将其内容呈现为optgroup（不是从头开始，我编辑了一些在Internet上找到的代码，尽管我确实知道它在做什么），并且工作正常。但是，我现在遇到一种情况，我的下拉菜单中需要两个缩进级别，即<select>  <optgroup label="Level One">    <option> A.1 </option>    <optgroup label="Level Two">      <option> A.B.1 </option>    </optgroup>    <option> A.2 </option>  </optgroup></select>但是，在上面的示例代码段中，它呈现Level Two的缩进量与相同Level One。有没有一种方法可以产生我想要的嵌套optgroup行为？

Answer 1

这里的HTML规范确实坏了。它应该允许嵌套的optgroup，并建议用户代理将它们呈现为嵌套菜单。相反，仅允许一个optgroup级别。但是，他们确实必须就该主题说以下几点：

注意。建议实现者，HTML的未来版本可以扩展分组机制，以允许嵌套组（即，OPTGROUP元素可以嵌套）。这将使作者能够代表更丰富的选择层次。

用户代理可以开始使用子菜单来渲染optgoup，而不是像现在那样在optgroup中的第一个option元素之前显示标题。

Answer 2

这很好，但是如果您添加的选项不在optgroup中，则会出现问题。

<select>

  <optgroup label="Level One">

    <option> A.1 </option>

    <optgroup label="&nbsp;&nbsp;&nbsp;&nbsp;Level Two">

      <option>&nbsp;&nbsp;&nbsp;&nbsp; A.B.1 </option>

    </optgroup>

    <option> A.2 </option>

  </optgroup>

  <option> A </option>

</select>

如果您立即使用css并关闭optgroup会更好：

<select>

  <optgroup label="Level One"></optgroup>

  <option style="padding-left:15px"> A.1 </option>

  <optgroup label="Level Two" style="padding-left:15px"></optgroup>

  <option style="padding-left:30px"> A.B.1 </option>

  <option style="padding-left:15px"> A.2 </option>

  <option> A </option>

</select>

Answer 3

好吧，如果有人读过：最好的选择是&nbsp;在每个额外的缩进级别上添加四个s，看来！

所以：

<select>

 <optgroup label="Level One">

  <option> A.1 </option>

  <optgroup label="&nbsp;&nbsp;&nbsp;&nbsp;Level Two">

   <option>&nbsp;&nbsp;&nbsp;&nbsp; A.B.1 </option>

  </optgroup>

  <option> A.2 </option>

 </optgroup>

</select>