在optgroup中选择2个optgroup

Question

是否可以在select2上有多层optgroup ？
基本上,另一个optgroup内的optgroup.

<select>
    <optgroup label="Level_1">
        <optgroup label="Level_2">
            <option value="option_1">option_1</option>
            <option value="option_2">option_2</option>
        </optgroup>
    </optgroup>
</select>

小提琴

谢谢.

Answer 1

尝试这样：

<select>
    <optgroup label="Level_1">
        <optgroup label="&nbsp;&nbsp;&nbsp;&nbsp;Level_2">
            <option value="option_1">&nbsp;&nbsp;&nbsp;&nbsp;option_1</option>
            <option value="option_2">&nbsp;&nbsp;&nbsp;&nbsp;option_2</option>
        </optgroup>
    </optgroup>
</select>

检查这个演示

Answer 2

html不支持嵌套的optgroup,但您可以使用JavaScript来创建它们.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script>
            $(document).ready(function () {
                $('#NestedOptGroups').select2({
                    data: [
                        {
                            text: 'Level_1', children: [
                            {
                                text: 'Level_2', children: [
                                {id: 'Level2Opt0', text: 'Sub Option 1'},
                                {id: 'Level2Opt1', text: 'Sub Option 2'}
                            ]
                            },
                            {id: 'Level1Opt0', text: 'Main Level option 1'}
                        ]
                        }
                    ]
                });
            });
        </script>

    </head>
    <body>
            <input class="select2" id="NestedOptGroups" placeholder="select one"/>
    </body>
</html>