在下拉列表/选择中嵌套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>&nbsp; <optgroup label="Level One">&nbsp; &nbsp; <option> A.1 </option>&nbsp; &nbsp; <optgroup label="&nbsp;&nbsp;&nbsp;&nbsp;Level Two">&nbsp; &nbsp; &nbsp; <option>&nbsp;&nbsp;&nbsp;&nbsp; A.B.1 </option>&nbsp; &nbsp; </optgroup>&nbsp; &nbsp; <option> A.2 </option>&nbsp; </optgroup>&nbsp; <option> A </option></select>如果您立即使用css并关闭optgroup会更好：<select>&nbsp; <optgroup label="Level One"></optgroup>&nbsp; <option style="padding-left:15px"> A.1 </option>&nbsp; <optgroup label="Level Two" style="padding-left:15px"></optgroup>&nbsp; <option style="padding-left:30px"> A.B.1 </option>&nbsp; <option style="padding-left:15px"> A.2 </option>&nbsp; <option> A </option></select>

Answer 3

好吧，如果有人读过：最好的选择是&nbsp;在每个额外的缩进级别上添加四个s，看来！所以：<select>&nbsp;<optgroup label="Level One">&nbsp; <option> A.1 </option>&nbsp; <optgroup label="&nbsp;&nbsp;&nbsp;&nbsp;Level Two">&nbsp; &nbsp;<option>&nbsp;&nbsp;&nbsp;&nbsp; A.B.1 </option>&nbsp; </optgroup>&nbsp; <option> A.2 </option>&nbsp;</optgroup></select>