HTML / CSS: Nested in a <select> field?

Question

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 t

Answer 1

You cannot nest multiple <option>s. If you want to group <option> elements, use <optgroup>.

Answer 2

No, not really. There is an optgroup tag which are unselectable headers you can add between sections, but nesting is not possible for <select> elements.

Answer 3

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.

Answer 4

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.

Imagine A, B and C are your options:

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

You want to display them like: A->B->C (A is B's parent & B is C's parent).

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:

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.

• 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

This way we'll 'emulate' the nest effect.

At last, our setSelectedOption function:

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.

Hope this helps to somebody, and sorry for not having enough time to replicate the examples in pure JavaScript.

Answer 5

Look into using the optgroup tag. 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.

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 UL structure and giving it the interaction via JavaScript.