JQuery 附加到使用数组进行选择

Question

很简单，但你猜怎么着，不适合我。我有一个像这样的逗号分隔列表： Option1,Option2,Option3 我想将其附加到 ，这样它就变成Option1;Option2Option3

我可以像这样“拆分”列表（在获取列表的函数内）：

var optionsarray = $(this).val().split(',');

    $(optionsarray).each(function(i){
        var seloption = '<option value="'+optionsarray[i]+'">'+optionsarray[i]+'</option>'; 
    });

但是现在如何我是否将 seloption 添加到我的选择列表中？如果我将

$('#selecttoappendto').append('<option value="'+optionsarray[i]+'">'+optionsarray[i]+'</option>');

或

$('#selecttoappendto').append(seloption);

放在每个循环内，则什么也不会发生。将其放在我可以附加的每个之外，例如 optionsarray[0] 或 optionsarray[1] 等，但我无法附加 optionsarray[i] 我以哪种方式（在每个内部或外部）执行此操作。请帮忙 - 提前致谢

Answer 1

从空字符串开始，您可以使用 += 在循环中构建字符串。然后 .append() 字符串。

var optionsarray = $(this).val().split(',');

var seloption = "";

$.each(optionsarray,function(i){
    seloption += '<option value="'+optionsarray[i]+'">'+optionsarray[i]+'</option>'; 
});

$('#selecttoappendto').append(seloption);

或者另一种选择是单独构建元素，将它们存储在容器中，然后从容器中附加它们。

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

---

修复了 children 之后缺少 () 的问题。

Answer 2

这是我编写和使用的内容；它比 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);
    }
};

所以：

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

我实际上正是为此编写了这些插件；通过这种方式，我在 250 毫秒内构建了 1500 多个选项选择。 ：D

Answer 3

jQuery 的 .append 现在可以接受数组（不知道它是什么）就像 2012 年一样），所以这也有效：

let vals = $(this).val().split(',');
$('#myselect').append(vals.map(v => $('<option/>').text(v).attr({value:v})));

$也可以使用.map函数。它将创建一个具有 .appendTo 的 jQuery 数组：

$.map($(this).val().split(','), v=>$('<option/>').text(v).attr({value:v}))
  .appendTo('#myselect');