HTML/CSS：嵌套<；选项>；在a<；选择>；领域

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

---

由于更改只是美观的，是否可以使用css实现这一点？

您不能嵌套多个

s。如果要对

元素进行分组，请使用

您可以使用

创建单个嵌套级别

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

备选案文1.1
备选案文1.2
备选案文2.1
备选案文2.2

例如：

---

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

不，不是真的。有一个标记是不可选择的标题，您可以在节之间添加，但是

元素不能嵌套。

请使用

optgroup

标记进行查看。至于样式支持，虽然有一些，但由于它是一个表单元素，您可以在多大程度上依赖于浏览器

---

如果需要进行广泛的重新设置，请考虑使用嵌套的<代码> UL>代码>结构来构建自己的UI小部件，并通过JavaScript提供交互。p> 可以嵌套选项，甚至使其可选择。但您需要使用JavaScript。在本例中，代码是用TypeScript（Angular v6）编写的，但您也可以用任何其他现代Javascript框架（纯Javascript或jQuery）编写代码

设想A、B和C是您的选项：

let options = [
    'A',
    'B',
    'C'
];

您希望将它们显示为：A->B->C（A是B的父项，B是C的父项）

您希望用户能够选择A和C，但不能选择B。让我们创建一个简单的界面，使其更容易：

interface CoolOption {
    content: string,
    selectable: boolean,
    depth: number
};

现在，您的选项将如下所示：

let selectedOption: string = null;
let options: CoolOption[] = new Array<CoolOption>();
let A: CoolOption = {
    content: 'A',
    selectable: true,
    depth: 0
};
let B: CoolOption = {
    content: 'B',
    selectable: false,
    depth: 1
};
let C: CoolOption = {
    content: 'A',
    selectable: true,
    depth: 2
};

<mat-select>
    <mat-option *ngFor="let option of options" (change)="setSelectedOption($event)">
        <span [style.padding-left.px]="option.depth * 5">
            {{
                option.content
            }}
        </span>
    </mat-option>
</mat-select>

基本上，如果它是可选择的，selectedOption的值就会改变。否则它将保持原样

希望这对某些人有所帮助，并为没有足够的时间在纯JavaScript中复制示例而感到抱歉。

请参阅

setSelectedOption(option: CoolOption) {
    if (option.selectable) {
        this.selectedOption = option.content;
    }
}