动态显示下拉选择列表以提高性能 [英] Dynamically show dropdown select list to improve performance

问题描述

我有一个页面，用户可以编辑一个包含多达400个表单域的数据网格。

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

这导致浏览器使用内存很多，运行速度太慢。 p>

是否有某种方法可以提高性能，也许每次点击时动态填充下拉列表，并在离开下拉菜单时清除除选定选项之外的所有选项？

解决方案

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

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

HTML示例

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

JavaScript示例

  //通过页面上的所有SLEECTS迭代ITERATE，为其'onchange'事件处理函数添加一个函数，当用户更改选择选项时执行
 var selecting = document.getElementsByTagName（'select' ）; 
 var len = chosen.length; 
 while（len--）
 {
选择[len] .onchange = select_delete; 
} 
 
 //此功能用于选择选项，清除所有选项并将所选选项显示在选择选项集合中，仅出现一个选项
函数select_delete（）
 {
 var item = this [this.selectedIndex]; 
 this.options.length = 0; 
 this.appendChild（item）; 
} 
  

以下是一个可用的JSFiddle： http://jsfiddle.net/93o0qphv/1/

编辑：

要动态填充选定元素，您可以创建新的选项元素，将其设置为'文本'和'值'属性，并将其添加到所需的选择。

HTML

 < select id =first_select>< / select> 
  

JAVASCRIPT

  // POINTER TO DESIRED SELECT 
 var select = document.getElementById（'first_select'）; 
 
 //阵列持有一个对象每个选项
 var options_array = [{textvar：选项1，valuevar：1}，{textvar：第二个选项 valuevar：2}]; 
 
 //通过阵列迭代，使用每个对象'textvar'和'valuevar'作为新选项'文本'和'值'PROPERITES，然后为选择
添加新选项，作为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/

我希望这有助于您！

丹。

I have a page where users edit a grid of data that contains up to 400 form fields. Think inline editing of a table.

The problem is where most of the form fields are select dropdowns, some of which can contain up to 1,000 options.

This is causing browsers to use a lot of memory, and to run far too slowly.

Is there some way to improve performance here, perhaps by dynamically filling the dropdown every time it's clicked, and clearing all but the selected option when leaving the dropdown?

解决方案

I personally wouldn't advise clearing all other options from a select dropdown when a user selects one, in case they select the wrong one.

If you still would like to do this, use something similar to the following, to achieve it:

HTML Example

<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 Example

// 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);
}

And here's a working JSFiddle: http://jsfiddle.net/93o0qphv/1/

EDIT:

To dynamically populate select elements, you can create new option element, set it's 'text' and 'value' properties, and add it to the desired select.

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

Here's an example: http://jsfiddle.net/ShadeSpeed/gxxugp6v/

I hope this helps!

Dan.

这篇关于动态显示下拉选择列表以提高性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！