Question

I am trying to setup jQuery rows, with add/remove row functionality. I got started with online tutorial,

http://jsbin.com/aciba

that works fine. It only has input forms though. We need select to choose from.

Now, I made some changes to accept selects as as well as inputs:

http://jsbin.com/emata

This does not work. Try selecting option 3 in cell 1, and press add “Add”. The row added gets default “Cell 1” selected option to 1.

What could be the reason?

Answer 1

The problem is that the use of clone on var newRow = addRow.clone(); clones the select with all the options but does set the selected option. You will need to do that yourself.

Adding

$('select', newRow).val($('select', addRow).val());

somewhere before

$('select', addRow).val(''); 

should solve your problem.

Also I would consider renaming your select box to:

<select name="n0_0" id="n0_0" style="width: 160px;">

To follow the naming scheme of the other inputs.