HTML / CSS：在 <select> 字段中嵌套 <options>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7488968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML / CSS: Nested <options> in a <select> field?
提问by stef
Is it possible to create nested option fields in a form drop down, much like you would create nested ul lists?
是否可以在表单下拉列表中创建嵌套选项字段，就像创建嵌套的 ul 列表一样？
Since the change is just aesthetical, is it possible to do this with css?
由于更改只是美观，是否可以用 css 来做到这一点？
回答by Chris Marasti-Georg
You can use <optgroup>to create a single level of nesting...
您可以使用<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>
Example: http://jsfiddle.net/JaZAm/1/
示例：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.
请注意，组标签不是可选选项。在这种情况下，我建议使用在他的评论中链接到的问题的最佳答案中提到的文本缩进解决方案。
回答by Rob W
You cannot nest multiple <option>s. If you want to group <option>elements, use <optgroup>.
您不能嵌套多个<option>s。如果要对<option>元素进行分组，请使用<optgroup>.
回答by Chris Van Opstal
回答by DA.
Look into using the optgrouptag. As for styling support, there is some, but you are at the mercy of the browser as to how far you can take it as it is a form element.
考虑使用optgroup标签。至于样式支持，有一些，但是您可以将其作为表单元素使用多远，这取决于浏览器。
http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single-optgroup/
http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single-optgroup/
If you need extensive restyling, consider building your own UI widget using perhaps a nested ULstructure and giving it the interaction via JavaScript.
如果您需要大量重新设计样式，请考虑使用嵌套UL结构构建您自己的 UI 小部件并通过 JavaScript 为其提供交互。
回答by Erwol
It's possible to nest options and even make them selectables. But you'll need to use JavaScript. In this example, the code is written in TypeScript (Angular v6), but you could do the same with any other modern Javascript framework, pure Javascript or jQuery.
可以嵌套选项，甚至可以将它们设为可选。但是您需要使用 JavaScript。在这个例子中，代码是用 TypeScript (Angular v6) 编写的，但你可以用任何其他现代 Javascript 框架，纯 Javascript 或 jQuery 来做同样的事情。
Imagine A, B and C are your options:
想象一下 A、B 和 C 是您的选择：
let options = [
'A',
'B',
'C'
];
You want to display them like: A->B->C (A is B's parent & B is C's parent).
您希望将它们显示为：A->B->C（A 是 B 的父级，B 是 C 的父级）。
And you want the user to be able to select A and C, but no B. Let's create a simple interface that will make that easier:
并且您希望用户能够选择 A 和 C，但不能选择 B。让我们创建一个简单的界面，使其更容易：
interface CoolOption {
content: string,
selectable: boolean,
depth: number
};
Now, your options will look like:
现在，您的选项将如下所示：
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
};
And your select template will look like:
您选择的模板将如下所示：
<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>
Simple explanation: when the user selects an option, setSelectedOption function (we'll define it next) will be called. Also, the CSS padding-left property will be affected by the 'depth' property we set before.
简单解释：当用户选择一个选项时，将调用 setSelectedOption 函数（我们将在接下来定义它）。此外，CSS padding-left 属性会受到我们之前设置的 'depth' 属性的影响。
- A element will have a padding-left of 0 * 5 = 0px
- B element will have a padding-left of 1 * 5 = 5px
- C element will have a padding-left of 2 * 5 = 10px
- 一个元素的 padding-left 为 0 * 5 = 0px
- B 元素的 padding-left 为 1 * 5 = 5px
- C 元素的 padding-left 为 2 * 5 = 10px
This way we'll 'emulate' the nest effect.
这样我们将“模拟”嵌套效果。
At last, our setSelectedOption function:
最后，我们的 setSelectedOption 函数：
setSelectedOption(option: CoolOption) {
if (option.selectable) {
this.selectedOption = option.content;
}
}
Basically if it's selectable, the value of selectedOption will change. Otherwise it will remain intact.
基本上，如果它是可选的，则 selectedOption 的值会改变。否则它将保持原样。
Hope this helps to somebody, and sorry for not having enough time to replicate the examples in pure JavaScript.
希望这对某人有所帮助，很抱歉没有足够的时间在纯 JavaScript 中复制示例。
