Question

我在决斗列表框控件上方有一个链接，即“全选”。该功能是将<select>选项从一个选择移动到另一个选择。

jQuery从源移动到目的地并且工作正常，但现在源<select>中有超过100,000条记录，并导致

未捕获RangeError：超出最大调用堆栈大小

Chrome中的

以及Firefox中无法响应的脚本弹出窗口。这是jQuery：

$('#' + source + ' option').remove().appendTo('#' + destination).removeAttr('selected');

我是否可以通过这种方式来限制对浏览器的影响，而不会导致大量<option> s出现问题？

Answer 1

我没有足够的声誉发表评论但想加入讨论。我甚至无法构建一个可以使用jquery在谷歌浏览器中打开的select语句。我的代码是

function selectBuild() {
html = '<select id="select1">';
for (i=0;i<100001;i++) {
    html += '<option>' + i + '</option>';
}
html += '</select>';
$('#selectdiv').html(html);
html ='';
}

也许您可以将所有选项迭代到数组并重新打印该数组？好像

var options = new Array();
$('#'+source+' option').each(function() { options.push($(this).val()); });
html = '<select id="' + destination + '">';
$(options).each(function(index,value) { html+='<option>'+value+'</option>'; });
html += '</select>';

$('#div').html(html);

Answer 2

不是逐行解析，而是将整个HTML从源复制到目标，然后从源中删除html。我不完全确定你在活动类中做了什么，但你可以只添加一个addClass（）或removeClass（）作为nessecary。

$('#' + destination).html($('#' + source + ' option').html());
$('#' + source + ' option').html('');

这里有一个工作示例的jsFiddle，尽管它没有100,000个选项。 https://jsfiddle.net/j9qtej9r/

如何使用javascript将大量选择选项移动到另一个选择控件？

2 个答案: