После динамической загрузки большого количества опций выпадающий список перестает работать
Я работаю над выпадающим меню select2 multiselect. Но я пытаюсь динамически загружать опции в раскрывающийся список при выборе другого раскрывающегося списка. Когда я выбираю значение в раскрывающемся списке, 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-запрос выполняется до тех пор, пока параметры не загружаются в мой выпадающий список, вся моя страница работает неправильно Даже мой раскрывающийся список не работает должным образом. Требуется много времени, чтобы выбрать только один вариант.
Пожалуйста, помогите мне в этом. Я столкнулся с этой проблемой и потратил много часов, чтобы решить эту проблему.
1 ответ
Поскольку 16000 - это очень большое количество опций для рендеринга с помощью select2, требуется время для создания DOM и рендеринга на странице. При этом страница будет плохо себя вести, как вы испытываете. Решение состоит в том, чтобы не загружать все 16000 опций одновременно, загружать топ 1000 результатов и лениво загружать другие опции при прокрутке или с помощью поиска. Надеюсь, это поможет.