Select2 下拉位置上方或下方不起作用

Question

我使用的是select2 4.0.6-rc.0版本。

我在模态（.modal-body）内的 select2 字段中添加了搜索选项

每当有人从该输入框中选择内容时，它就会在表格中添加一行。

这里的问题是：当这个表有超过 20 个项目时，select2 下拉菜单在折叠下方打开，我必须向下滚动页面并选择一个选项。有什么方法可以解决这个问题，例如：打开上方的 select2 下拉菜单或滚动页面以正确定位下拉菜单？

这里是代码：

    $("#improved_sales_modal .finish_stock_products").select2({
        ajax: {
            url: "api/finish-stock-search-in-sales",
            dataType: "json",
            delay: 250,
            data: function (params) {
                return {
                    term: params.term,
                    search_by: "p.name",
                    sales_product_search_option: zubizi.settings.sales_product_search_option || "smart"

                };
            },
            processResults: function (result) {
                return {
                    results: result
                };

            },
        },
        minimumInputLength: 1,
        templateSelection: data => (data.name || data.text),
        templateResult(data) {
            if (data.name) {
                return `<table style = "width: 100%">
                <tr>
                    <td>${data.name}</td>
                    <td class="text-right">${data.size_group_name}</td>
                </tr>
                <tr>
                    <td><small>${data.sales_rate}</small></td>
                    <td class="text-right"><small> Avl Qty: ${data.available_qty}</small></td>
                </tr>
                <tr>
                    <td class="text-left"><small>Color: ${data.color_name}</small></td>
                    <td class="text-right"><small>Total Avl Box: ${data.total_available_box} (${data.godown_name})</small></td>
                </tr>
                </table>`;
            } else {
                return data.text;
            }
        },
        allowClear: true,
        escapeMarkup: function (m) {
            return m;
        },

    });