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

Fiddle

谢谢。

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>

Check this Demo

Answer 2

html 不支持嵌套的 optgroups，但您可以使用 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>

在 optgroup 中选择 2 optgroup

Select2 optgroup inside optgroup

jquery-select2