JQuery 附加到使用数组进行选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4969754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery append to select with an array
提问by Russell Parrott
very simple but guess what, not for me. I have a comma separated list like this: Option1,Option2,Option3 that I want to append to a <select>so it becomes <select><option>Option1</option><option>Option2</option><option>Option3</option></select>
很简单，但你猜怎么着，不适合我。我有一个逗号分隔的列表，如下所示：Option1,Option2,Option3 我想附加到 a<select>所以它变成<select><option>Option1</option><option>Option2</option><option>Option3</option></select>
I can "split" the list like this (inside a function that gets the list):
我可以像这样“拆分”列表（在获取列表的函数中）：
var optionsarray = $(this).val().split(',');
$(optionsarray).each(function(i){
var seloption = '<option value="'+optionsarray[i]+'">'+optionsarray[i]+'</option>';
});
But now how do I append seloptionto my select list. If I put
但是现在我如何附加seloption到我的选择列表中。如果我把
$('#selecttoappendto').append('<option value="'+optionsarray[i]+'">'+optionsarray[i]+'</option>');
or
或者
$('#selecttoappendto').append(seloption);
inside the each loop nothing happens. Take it outside the each I can append say optionsarray[0], or optionsarray[1]etc. but I cannot get to append optionsarray[i]which ever way I do it (inside or outside the each). Help please - thanks in advance
在每个循环内什么也没有发生。将它放在我可以附加的 each 之外，例如optionsarray[0]，optionsarray[1]等等，但我无法以optionsarray[i]任何方式附加（在 each 的内部或外部）。请帮助 - 提前致谢
回答by user113716
Starting with an empty string, you can build a string in the loop usingt +=. Then .append()the string.
从一个空字符串开始，您可以使用 t 在循环中构建一个字符串+=。然后.append()是字符串。
var optionsarray = $(this).val().split(',');
var seloption = "";
$.each(optionsarray,function(i){
seloption += '<option value="'+optionsarray[i]+'">'+optionsarray[i]+'</option>';
});
$('#selecttoappendto').append(seloption);
or another option would be to build the elements separately, store them in a container, then append them from the container.
或者另一种选择是单独构建元素，将它们存储在容器中，然后从容器中附加它们。
var optionsarray = $(this).val().split(',');
var temp_sel = $('<select>');
$.each(optionsarray,function(i){
temp_sel.append('<option>',{text:optionsarray[i],
value:optionsarray[i]
});
});
temp_sel.children().appendTo('#selecttoappendto');
Fixed missing ()after children.
固定失踪()后children。
回答by BrianFreud
Here's what I wrote and use; it's a little faster than the solution user113716 gave, because you're skipping creating the temp select, all those appends to that temp select (even if it is a DOM fragment, it still takes sometime), and you're also skipping the .children() find and unwrapping at the end for that final append.
这是我编写和使用的内容；它比 user113716 给出的解决方案快一点，因为你跳过创建临时选择，所有这些附加到临时选择（即使它是一个 DOM 片段，它仍然需要一些时间），而且你也跳过了.children() 在最后为最后的追加查找和解包。
// Appends multiple elements all at once; maintains chaining
$.fn.appendAll = function ($eleArr) {
var numEles = $eleArr.length
, $useEle = new $();
if (numEles) {
while (numEles--) {
$useEle = $eleArr[numEles].add($useEle);
}
return $(this).append($useEle);
}
};
// Prepends multiple elements all at once; maintains chaining
$.fn.prependAll = function ($eleArr) {
var numEles = $eleArr.length
, $useEle = new $();
if (numEles) {
while (numEles--) {
$useEle = $eleArr[numEles].add($useEle);
}
return $(this).prepend($useEle);
}
};
So:
所以：
var optsArr = $(this).val().split(','),
$options = [],
thisOption;
$.each(optsArr, function(i) {
thisOption = '<option value="' + optsArr[i] + '">' + optsArr[i] + '</option>';
$options.push($(thisOption));
});
$yourSelect.appendAll(optsArr);
I actually wrote those plugins for exactly this; doing it this way, I build a 1500+ option select in under 250 ms. :D
我实际上正是为此编写了这些插件；这样做，我在 250 毫秒内构建了 1500 多个选项选择。:D
