HTML Select 仅添加到最后一行

Question

简介

我正在尝试将 select 框添加到 <td> 单元格。我不知道会有多少行或 <td>，也不知道 select 框中会有多少选项，所以我需要动态地执行此操作。

我的代码

我首先像这样构建我的 <select> 盒子：

var select = $("<select>").addClass('form-control');
// for later expansion, as user can add custom fields
var options = {
    ''                  : 'Ignore',
    'first_name'        : 'First Name',
    'last_name'         : 'Last Name',
    'full_name'         : 'Full Name',
    'email'             : 'Email',
    'cellphone_number'  : 'Cellphone Number'
};
$.each(options,function(i,v) {
    select.append($('<option>').val(i).text(v));
});

然后我这样添加：

$.each(parsedCSV[0],function(i,v) {
    value = [];
    if(i != "") {
        for(k = 0; k < 10; k++) {
            value.push(parsedCSV[k][i]);
        }
        tr = $('<tr>').appendTo(table);
        if(col_header) {
            tr.append($('<tr>').html(i));
        }
        tr.append($('<td>')
            .append(select)
        ).append($('<td>')
            .html(value.join(', '))
        );
    }
});

parsedCSV 是一个 Object，看起来像这样：

{
    'name' : 'value',
    'index' : 'value',
    'foo' : 'bar',
}

这个 Object 可以有任意数量的键和值。

怎么了？

<select> 框只出现在最后一行，而不是我希望的每一行。如果我在 $.each() 中添加一个 console.log(select)，它会显示在 chrome 的控制台中，所以它就在那里。

知道为什么会这样吗？

Answer 1

一个元素不能同时存在于 DOM 中的多个位置。

当您将它附加到某处时，如果它已经存在并放置在新位置，则会从 DOM 中删除它。

您只创建了一个 select 元素，然后您尝试将它放在多个地方。

或者：

多次调用创建它的代码或
每次追加时克隆您创建的第一个

HTML Select 仅添加到最后一行

HTML Select only added to last row

jquery

html

html-select

简介

我的代码

怎么了？