在 optgroup 中选择 2 optgroup答案

【问题标题】：Select2 optgroup inside optgroup在 optgroup 中选择 2 optgroup
【发布时间】：2015-01-26 19:11:13
【问题描述】：

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

谢谢。

【问题讨论】：

标签： jquery-select2

【解决方案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>

【讨论】：

输出嵌套 optgroups，这是无效的 HTML，不能保证在所有浏览器上都可以工作：select2.org/options#dropdown-option-groups

【解决方案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

【讨论】：

常规选择的巧妙解决方法，但不适用于 select2。