Question

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

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

这导致浏览器使用 lot 的内存，运行得太慢。

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

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/

编辑：

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

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/

我希望这有帮助！

丹

Answer 2

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

您的一个选择是为当前页面上可见的选择框添加AJAX加载选项。如下所示：（Fiddle，如果代码段不起作用）

＆＃13;

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

＆＃13;

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

＆＃13;

然后，您需要返回一个类似<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>

的字符串

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

2 个答案: