动态加载大量选项后下拉列表停止工作

Question

我正在研究 select2 multiselect 下拉菜单。但是我正在尝试将选项动态加载到其他下拉列表的 selection 上的下拉列表中。当我 select 下拉列表中的值然后 ajax 请求转到服务器和数据 c 意味着用户来了，这只是我试图加载到另一个下拉列表中的选项。以下是我尝试加载数据的下拉菜单。

$(document).on('change','#platform', function(){
        var platform_value = $(this).val();

        $.ajax({
            url: '/myroute/function_name',
            type: 'Get',
            dataType: 'json',
            data : {platform_value:platform_value},
            success: function (res) {
                console.log('options ready');
                if(res != ""){
                    $('#user_id').html(res);
                    $('#user_id').select2();``
                }
            }
        });
    });

我的 res 对象将包含以下值。

"<option value=\"1\">abcd</option><option value=\"16000\">ajsha</option>"

我只有两个选项供参考。但实际上它有超过 16000 个选项。因此，一旦我 select 平台和 ajax 请求一直到选项加载到我的下拉列表中，我的整个页面都无法正常工作。甚至我的下拉菜单也无法正常工作。 select只有一个选项需要很多时间。

请帮帮我。我正面临这个问题，花了很多时间来解决这个问题。

Answer 1

由于 16000 是使用 select2 呈现的大量选项，因此创建 DOM 并在页面上呈现需要时间。这样做时，页面会出现您所遇到的异常行为。解决方案是不要一次加载所有 16000 个选项，加载前 1000 个结果并在滚动时或在搜索的帮助下延迟加载其他选项。希望这会有所帮助。

动态加载大量选项后下拉列表停止工作

After dynamically loading lot of options dropdown stops working

ajax

performance

jquery

jquery-select2

jquery-ui-multiselect