Issue in select option in Jquery mobile

Question

I have a table which contains input text and select option and button.The table row is cloned when the button is clicked. Every thing is working fine except the select option. After the table row is cloned the select option not display what i select. Here is the JsFiddle http://jsfiddle.net/aravinth/Ad22d/

Javascript code like

var b = 1;

function cloneRow() {

var row = document.getElementById("table");
var table = document.getElementById("particulars");

var clone = row.rows[1].cloneNode(true);
var clones = row.rows.length;

var workerName = clone.cells[0].getElementsByTagName('input')[0];
var position = clone.cells[2].getElementsByTagName('select')[0];
var date1 = clone.cells[3].getElementsByTagName('input')[0];
var fromHr = clone.cells[4].getElementsByTagName('input')[0];
var toHr = clone.cells[5].getElementsByTagName('input')[0];
var add = clone.cells[1].getElementsByTagName('input')[0];

workerName.id = "workerName" + b;
position.id = "position" + b;
date1.id = "date1" + b;
fromHr.id = "fromHr" + b;
toHr.id = "toHr" + b;
add.id = "add" + b;
$(date1).datebox();
table.appendChild(clone);
b++;

}

Also i referred this

1 . Change Select value using jQuery Uniform.js

2 . jquery cloning a block of element. select element acting weired

3. select not working after .clone

but not get success. Please suggest some solutions.

Answer 1

It seems, jQuery mobile doesn't recognize the cloned selectmenu .

What you can do, is remove the selectmenu and re-add only the HTML select and then initialize it with selectmenu()

$('.ui-select', clone).remove();
clone.cells[2].appendChild(position);
$(position).selectmenu();

See modified JSFiddle

Update:

I just followed jquery cloning a block of element. select element acting weired and found @malko's answer , which is a lot more elegant than removing and reinserting. This reduces it to

$(position).closest('.ui-select').replaceWith(position);
$(position).selectmenu();

See JSFiddle

Answer 2

I think you solved select option issue by using this answer. And another one issue you need to fix in your fiddle. The issue is time picker for last two columns (fromHr and toHr).

To fix this you need to add the bellow lines in your javascript code.

$(fromHr).datebox();
$(toHr).datebox();

because those rows are dynamically created. So you need to add the above lines to show time picker in your fromHr and toHr.

See this working FIDDLE

Answer 3

The issue is that jQuery Mobile recreates a lot of elements, for example your select, to be non-native widgets, and then binds functions to certain events. When you just clone the row, you aren't getting the event-bindings, so what you need to do is actually append the raw html -- what it was before it got re-rendered -- and then trigger the create method:

var template="<tr><td>..your row here..</td></tr>";
$("#particulars").append(template).parent().trigger('create');

I have a barely working fiddle, but I removed a lot of your code so I could easily illustrate what I am talking about. http://jsfiddle.net/Ad22d/81/

Answer 4

我有同样的问题并通过在克隆之前调用原始选择框上的selectmenu（“destroy”）来修复它，然后在附加克隆选择之后通过调用selectmenu（）重新初始化选择框。