开发者问题收集

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

2016-01-05
187
javascript jquery

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

jQuery 从源移动到目标并且运行良好，但现在源 <select> 中有超过 100,000 条记录，并导致 Chrome 中出现

Uncaught RangeError: Maximum call stack size exceeded

，Firefox 中出现无响应的脚本弹出窗口。这是 jQuery： 

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

有没有办法可以做到这一点以限制对浏览器的影响并且不因大量 <option> 而导致问题？

2个回答

我没有足够的声誉来发表评论，但我想加入讨论。我甚至无法使用 jquery 构建可以在 Google Chrome 中打开的选择语句。我的代码是 

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);
2016-01-05

与其逐行解析，我只需将整个 HTML 从源复制到目标，然后从源中删除 html。我不太确定您对活动类做了什么，但您可能只需添加 addClass() 或 removeClass() 作为必需的。 

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

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

efarley
2016-01-05