Question

很简单，但猜猜是什么，不适合我。我有一个逗号分隔的列表，如下所示：Option1，Option2，Option3，我想要附加到<select>，因此它变为<select><option>Option1</option><option>Option2</option><option>Option3</option></select>

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

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

JQuery追加选择数组

2 个答案: