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

Question

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

问题是大多数表单字段都是选择下拉菜单，其中一些最多可以包含 1,000 个选项。

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

这里有没有什么方法可以提高性能，也许是通过在每次单击时动态填充下拉菜单，并在离开下拉菜单时清除除所选选项之外的所有选项？

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/

编辑:

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

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/

希望对您有所帮助!

丹.