HTML/CSS：在<select>字段中嵌套<options>？

Question

是否可以在表单下拉列表中创建嵌套的选项字段，就像创建嵌套的ul列表一样？

由于改变只是美学，是否有可能做到这一点与CSS？

Answer 1

您可以使用<optgroup>创建的嵌套单级...

<select> 
    <optgroup label="Options 1"> 
    <option>Option 1.1</option> 
    <option>Option 1.2</option> 
    </optgroup> 
    <optgroup label="Options 2"> 
    <option>Option 2.1</option> 
    <option>Option 2.2</option> 
    </optgroup> 
</select> 

例子：http://jsfiddle.net/JaZAm/1/

注意，组标签不可选的选项。在这种情况下，我建议使用在他评论中家庭链接问题的顶部答案中提到的文本缩进解决方案。

Answer 2

不能嵌套多个<option> s。如果要将<option>元素分组，请使用<optgroup>。

Answer 3

不，不是真的。有一个optgroup标签，它们是可以在部分之间添加的无法选择的标头，但嵌套不可用于<select>元素。

Answer 4

使用optgroup标签进行调查。至于样式支持，还有一些，但是由于它是一个表单元素，你可以在浏览器的控制下使用它。

http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single-optgroup/

如果你需要大量的改型，可以考虑使用也许嵌套UL结构构建自己的UI插件，并给予它通过JavaScript的相互作用。