Question

我正在处理select2多选下拉列表。但是我试图在选择其他下拉菜单时将选项动态加载到下拉菜单中。当我在下拉列表中选择值时，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多种选择。因此，一旦我选择了平台并且ajax请求一直到选项加载到我的下拉菜单中，我的整个页面就无法正常工作。甚至我的下拉菜单也无法正常工作。仅选择一个选项会花费很多时间。

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

Answer 1

由于16000是使用select2进行渲染的大量选项，因此创建DOM并在页面上进行渲染需要花费时间。这样做时，页面将无法正常运行。解决的办法是一次不加载所有16000个选项，不加载前1000个结果，而在滚动时或在搜索的帮助下延迟加载其他选项。希望这会有所帮助。

动态加载许多选项后，下拉列表将停止工作

1 个答案: