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

Question

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

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

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