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

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>

Answer 2

试试这样：

<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

在optgroup中选择2个optgroup

2 个答案: