Question

I can’t seem to figure this out…

I have a table with ‘x’ rows. When I click on a button I want to clone the last table row and append it behind it. So far no problem. But I have a select (using selectmenu styling) in every table row.

I have made a quick example here:
http://jsfiddle.net/u8Lpe/

When you click on ‘Add table row’ you can’t select an option on the new added row. (it will just change the value of the row that’s cloned)

I have searched and tried a lot of different things, but so far I haven’t been able to fix it. (using refresh/destroy options etc.)

Hopefully someone can help me out, or has an idea what to do!

Answer 1

There were couple of issues in your code. For the first row which you render along with page markup you apply selectmenu plugin on the select element inside it. selectmenu attaches few events and styles on it along with few extra markup.

When you clone(passing true as argument) the tbody which contains this select element with selectmenu plugin applied, everything is cloned. The true arguments tells jQuery to clone the events also applied on the elements, which is not required.

What you have to do is clone by passing false and after clone remove the extra span and inline style which the plugin adds and then call selectmenu on the new row select element.

I have fixed this in your fiddle take a look.

Demo