select2 下拉框回显问题 树形菜单 部门结构的

版本：Select2 4.0.3 | https://github.com/select2/select2/blob/master/LICENSE.md

原项目用jsp bootstrap

测试了快一天 终于在kimi上找到结果了 原来的select2 不支持层级结构的回显 需要改成数组的不带层级的方式给到select2 才能正常选择回显 另外需要自已渲染出来层级结构 要不然都是平级的

要在Select2中获取选中项的层级信息，可以通过在数据对象中添加一个表示层级的属性来实现。以下是一个基于搜索结果的解决方案，它展示了如何在Select2中为每个选项添加层级信息，并在选中时获取该层级：

HTML部分：

html

<select id="selectWithHierarchy" style="width: 300px;">
    <!-- Select2将会填充选项 -->
</select>

JavaScript部分：

javascript

$(document).ready(function() {
    // 假设您的数据结构如下，包含父节点和子节点，以及层级信息
    var data = [
        {
            id: '1',
            text: 'Parent 1',
            level: 1, // 层级信息
            children: [
                {
                    id: '1-1',
                    text: 'Child 1',
                    level: 2
                },
                {
                    id: '1-2',
                    text: 'Child 2',
                    level: 2
                }
            ]
        },
        {
            id: '2',
            text: 'Parent 2',
            level: 1,
            children: [
                {
                    id: '2-1',
                    text: 'Child 3',
                    level: 2
                },
                {
                    id: '2-2',
                    text: 'Child 4',
                    level: 2
                }
            ]
        }
    ];

    // 将树形数据转换为Select2需要的格式，并添加层级关系
    function formatDataWithHierarchy(data) {
        var result = [];
        data.forEach(function(item) {
            result.push({
                id: item.id,
                text: item.text,
                level: item.level
            });
            if (item.children) {
                result = result.concat(formatDataWithHierarchy(item.children));
            }
        });
        return result;
    }

    var formattedData = formatDataWithHierarchy(data);

    // 初始化Select2
    $('#selectWithHierarchy').select2({
        data: formattedData,
        placeholder: "Select an option",
        allowClear: true,
        templateResult: function (data) {
            // 自定义结果显示，包含层级关系
            return '<div class="select2-result-repository__meta"><div class="select2-result-repository__title">' + 
                    new Array(data.level).join('&nbsp;&nbsp;&nbsp;') + data.text + '</div></div>';
        },
        templateSelection: function (data) {
            // 自定义选择结果显示，包含层级关系
            return data.text;
        }
    });

    // 监听选择变化事件，获取选中项的层级
    $('#selectWithHierarchy').on('select2:select', function (e) {
        var selectedData = e.params.data;
        console.log("Selected item's level: " + selectedData.level); // 输出选中项的层级
    });
});

在这个示例中，我们首先定义了一个包含父节点和子节点的树形结构数据，并为每个节点添加了一个level属性来表示层级信息。然后，我们创建了一个formatDataWithHierarchy函数，该函数递归地遍历数据，并将层级信息添加到每个节点中。

在templateResult函数中，我们使用HTML的<div>标签和 实体来表示层级关系，层级越深，前面的空格就越多。这样，Select2下拉列表中的选项就会显示层级关系。

最后，我们监听了Select2的select2:select事件，当用户选择一个选项时，事件的参数e.params.data包含了选中项的数据，包括层级信息。我们可以通过这个数据来获取选中项的层级，并进行相应的处理。

这个解决方案提供了一个通用的方法来允许Select2选择父节点并显示层级关系，同时能够获取选中项的层级信息。您可以根据实际情况进行调整和优化。