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的相互作用。