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

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();
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:

    
        
            {{
                option.content
            }}
        
    

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.