HTML / CSS：嵌套< options>在< select>领域？ [英] HTML / CSS: Nested <options> in a <select> field?

问题描述

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

由于更改只是美观，

您可以使用< optgroup> c>创建单层嵌套...

 < select& 
< optgroup label =Options 1> 
< option>选项1.1< / option> 
< option>选项1.2< / option> 
< / optgroup> 
< optgroup label =Options 2> 
< option>选项2.1< / option> 
< option>选项2.2< / option> 
< / optgroup> 
< / select> 
  

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

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

Is it possible to create nested option fields in a form drop down, much like you would create nested ul lists?

Since the change is just aesthetical, is it possible to do this with css?

解决方案

You can use <optgroup> to create a single level of nesting...

<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>

Example: http://jsfiddle.net/JaZAm/1/

Note that the group labels are not selectable options. In that case, I would recommend using the text-indent solution that is mentioned in the top answer to the question that home linked to in his comment.

这篇关于HTML / CSS：嵌套< options>在< select>领域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！