动态显示下拉列表选择列表以提高性能

我有一个页面，用户可以编辑包含最多400个表单字段的数据网格。 想想一个表的内联编辑。

问题在于大多数表单字段是select下拉列表，其中一些可以包含多达1,000个选项。

这导致浏览器使用大量内存，运行速度太慢。

有没有办法在这里提高性能，可能是每次点击时动态填充下拉列表，并在离开下拉列表时清除除选定选项之外的所有选项？

Answer 1

当用户选择一个选项时，我个人不建议从选择下拉列表中清除所有其他选项，以防他们选择错误的选项。

如果您仍想这样做，请使用类似于以下内容的方法来实现它：

HTML示例

  test1 test2 test3 test4 test5  

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/

编辑：

要动态填充选择元素，您可以创建新的选项元素，设置它的’text’和’value’属性，并将其添加到所需的选择。

HTML

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 

这是一个例子： http ： //jsfiddle.net/ShadeSpeed/gxxugp6v/

我希望这有帮助！

担。

Answer 2

我以前必须做类似的事情。

您可以选择AJAX加载选项框的选项，这些选项框在当前页面上可见。 所以这样的事情:(如果代码片段不起作用，请小提琴 ）

 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();