使用jquery为克隆表行中的选择元素添加选项会导致克隆元素外部的选择选项被修改

Question

我正在尝试使用表格行作为添加多行的模板。我需要克隆该行，然后用一些数据更新select元素。我在进行克隆之前隐藏了表格行模板，因此选择不应该暂时显示。

我遇到的问题是我在页面上定义了其他选项，这些选项正在被此过程修改，但是当我执行以下操作时：

clonedTr.find('select').each(function() {
    console.log($(this));
    ...

它确认我只使用克隆表行中的选择。看到这个jsfiddle：https://jsfiddle.net/fud4wej2/2/

我还尝试在rowTemplate.remove()之后调用clone()，认为问题可能与重复的ID有关，但无济于事。否则，要查看正确显示的顶部下拉菜单 - 显示Foobar作为选项 - 请在return;语句中进行评论。

按原样 - $(this).append(option);注释掉 - 顶部下拉菜单显示WB-730-2中的第二个条目optionsToAdd作为其选项。如果您在最终$(this).append(option);语句中发表评论，则顶部下拉列表没有选项。

Answer 1

这些行：

var option = $('option');
option.val(optionsToAdd[i]);
option.text(optionsToAdd[i]);

$('option')函数正在评估整个文档范围内的CSS选择器，它在页面上抓取每个 option标记。这导致了你的问题。

修复：

var option = $('<option>');

这将解析HTML并创建一个新的选项元素。

另一种选择：

var option = $(document.createElement("option"));