使用 select2 时不显示下拉列表（使用 Thymleaf 和 Bootstrap5）

Question

我的脚本代码如下

function findDepartment(){
    $("#department").select2({
        dropdownPosition: 'below',
        placeholder: "Department",
        allowClear:true,
        tags: true,
        theme: 'bootstrap-5',
        ajax : {
            url: '/findDepNTeam',
            type: 'GET',
            dataType: 'json',
            delay : 250,
            data : function (params) {
                return {
                    sort : 1,
                    text : params.term
                };
            },
            processResults : function (data, params) {
                $('#department').empty();
                //params.page = params.page || 1;

                $.each(JSON.parse(data.department), function (index, item) {
                    let option = new Option(item, item, false, false);

                    console.log('option => ', option);

                    $('#department').append(option);
                });

                return {
                    results: data.department
                };
            },
            cache : true
        },
        minimumInputLength: 1
    });
}

我的 Tymeleaf 代码在下面

<div class="form-label-group">
      <select class="form-select form-select-lg mb-3" id="department" name="department" aria-label=".form-select-lg">
      </select>
</div>

然后，我可以看到这样的画面

然后这是您可以在开发人员工具中看到的结果屏幕。

因为我不熟悉 select2 和 bootstrap，我想通过附加到 select 来做一个选项，如果它是一个列表，也显示列表，但这不起作用。

我尝试更改或添加 select2 选项，还更改了引导程序类，但它不起作用。 如果数据是列表，我希望下拉菜单也显示列表。