使用jquery添加选项以选择克隆表行内的元素会导致修改克隆元素外的选择选项

Question

I'm trying to use a table row as a template for adding multiple rows. I need to clone the row, then update the select elements with some data. I hide the table row template before I do the clone, so the selects should not show up for the time being.

The issue I'm having is that I have other selects defined on the page that are being modified by this process, but when I do the following:

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

it confirms that I am only working with the selects within the cloned table row. See this jsfiddle: https://jsfiddle.net/fud4wej2/2/

I also tried to call rowTemplate.remove() after the clone() , thinking that the issue might have to do with duplicated ids, but to no avail. Otherwise, to see the top pulldown being displayed correctly - showing Foobar as it's option - comment in the return; statement.

As is -- with $(this).append(option); commented out -- the top pulldown shows the second entry WB-730-2 from optionsToAdd as its option. If you comment in the final $(this).append(option); statement, the top pulldown has no options.

Answer 1

These lines:

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

The $('option') function is evaluating that CSS selector in the scope of the whole document, which grabs every option tag on the page. This is causing your problem.

To fix:

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

This will parse the HTML and create a new option element.

Another alternative:

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