0

我正在研究 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 请求，直到选项加载到我的下拉列表中，我的整个页面都无法正常工作。甚至我的下拉菜单也无法正常工作。只选择一个选项需要很多时间。

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

4

1 回答 1

0

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

于 2018-06-22T07:12:39.573 回答