使用 jquery 向克隆的 table 行中的 select 元素添加选项会导致克隆元素外的 select 选项被修改

Question

我正在尝试使用 table 行作为添加多行的模板。我需要克隆该行，然后用一些数据更新 select 元素。我在克隆之前隐藏了 table 行模板，所以 select 暂时不会出现。

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

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

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

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

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

Answer 1

这些行：

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

$('option') 函数正在评估整个文档范围内的 CSS 选择器，它获取 every option 标签页。这导致了您的问题。

修复：

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

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

另一种选择：

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

Using jquery to add options to select element within cloned table row causes select options outside the cloned element to be modified