Динамическое отображение списка выпадающего списка для повышения производительности.

Question

У меня есть страница, на которой пользователи редактируют сетку данных, которая содержит до 400 полей формы. Подумайте о встроенном редактировании таблицы.

Проблема заключается в том, что большинство полей формы - это select выпадающие списки, некоторые из которых могут содержать до 1000 опций.

Это приводит к тому, что браузеры используют лот памяти и работают слишком медленно.

Есть ли способ улучшить производительность здесь, возможно, путем динамического заполнения раскрывающегося списка при каждом нажатии и очистки всех, кроме выбранного параметра, при выходе из выпадающего списка?

Answer 1

Я лично не советую снимать все остальные параметры из раскрывающегося списка выбора, когда пользователь его выбирает, если они выбрали неправильный.

Если вы еще хотели бы сделать это, использовать что-то подобное следующему, чтобы достичь этого:

HTML Пример

<select id="long_select"> 
    <option value="1">test1</option> 
    <option value="2" selected="selected">test2</option> 
    <option value="3">test3</option> 
    <option value="4">test4</option> 
    <option value="5">test5</option> 
</select> 

JavaScript Пример

// ITERATE THROUGH ALL SLEECTS ON THE PAGE, ADDING A FUNCTION TO THEIR 'onchange' EVENT HANDLER, WHICH WILL EXECUTE WHEN THE USER CHANGES THE SELECTS OPTION 
var selects = document.getElementsByTagName('select'); 
var len = selects.length; 
while(len--) 
{ 
    selects[len].onchange = select_delete; 
} 

// THIS FUNCTION CAPTURES THE SELECTED OPTION, CLEARS ALL OPTIONS AND APPENDS THE SELECTED OPTION TO THE SELECT'S OPTIONS COLLECTION, LEAVING ONLY ONE OPTION 
function select_delete() 
{ 
    var item = this[this.selectedIndex]; 
    this.options.length = 0; 
    this.appendChild(item); 
} 

А вот рабочий JSFiddle: http://jsfiddle.net/93o0qphv/1/

EDIT:

Чтобы динамически заполнить элементы выбора, вы можете создать новый элемент option, установить его свойства «текст» и «значение» и добавить его к нужному выбору.

HTML

<select id="first_select"></select> 

JAVASCRIPT

// POINTER TO DESIRED SELECT 
var select = document.getElementById('first_select'); 

// ARRAY HOLDING ONE OBJECT PER OPTION 
var options_array = [{"textvar":"Option 1","valuevar":1},{"textvar":"Second option","valuevar":2}]; 

// ITERATE THROUGH ARRAY, USING EACH OBJECTS 'textvar' AND 'valuevar' AS THE NEW OPTIONS 'text' AND 'value' PROPERITES, THEN ADD NEW OPTION TO THE SELECT 
for(var c=0;c<options_array.length;c++) 
{ 
    var new_option = document.createElement('option'); 
    new_option.text = options_array[c].textvar; 
    new_option.value = options_array[c].valuevar; 
    select.appendChild(new_option); 
} 

Вот пример: http://jsfiddle.net/ShadeSpeed/gxxugp6v/

Я надеюсь, что это помогает!

Dan.

Answer 2

Мне уже приходилось делать что-то подобное раньше.

Один из ваших вариантов - параметры загрузки AJAX для отдельных ящиков, которые видны на странице в настоящий момент. Так что-то вроде этого: (Fiddle для если фрагмент кода не работает)

function checkScroll(el) { 
 
    var top_of_object = el.offset().top; 
 
    var top_of_window = $(window).scrollTop(); 
 
    var bottom_of_object = el.offset().top + el.outerHeight(); 
 
    var bottom_of_window = $(window).scrollTop() + $(window).height(); 
 
    if ((top_of_object > top_of_window && bottom_of_object < bottom_of_window) && el.is(':empty')) { // If the element is in view and it's empty 
 
     el.load('ajax/MyURL?Select=thisSelect'); //Run ajax call to populate the element 
 
    } else if (top_of_object < top_of_window || bottom_of_object > bottom_of_window) { 
 
     el.empty(); // Empty elements not in view 
 
    } 
 
} 
 
function fireScroll() { 
 
    $('select').each(function() { //Loop through all selects 
 
     checkScroll($(this)); 
 
    }); 
 
} 
 
var timer; 
 
$(window).scroll(function(){ 
 
    timer && clearTimeout(timer); 
 
    timer = setTimeout(fireScroll, 100); // Make it only fire when you stop scrolling 
 
}); 
 
fireScroll();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select></select><select></select> 
 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
 
<select></select><select></select> 
 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
 
<select></select><select></select>

Вы AJAX вызов будет тогда просто нужно возвращать строку, которая была чем-то вроде <option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option><option>MyOption</option>