Jquery mobile中选择选项的问题答案

【问题标题】：Issue in select option in Jquery mobileJquery mobile中选择选项的问题
【发布时间】：2014-02-05 06:37:58
【问题描述】：

我有一个包含输入文本和选择选项和按钮的表格。单击按钮时会克隆表格行。除了选择选项外，一切都运行良好。克隆表行后，选择选项不显示我选择的内容。这是 JsFiddle http://jsfiddle.net/aravinth/Ad22d/

类似Javascript代码

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++;

}

我也提到了这个

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

但没有获得成功。请提出一些解决方案。

【问题讨论】：

@HüseyinBABAL 感谢您的回复......在我的浏览器和我的安卓设备中它没有改变......

标签： javascript jquery html jquery-mobile

【解决方案1】：

看来，jQuery mobile 无法识别克隆的selectmenu。

您可以做的是删除选择菜单并仅重新添加 HTML select，然后使用 selectmenu() 对其进行初始化

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

查看修改后的JSFiddle

更新：

我刚刚关注jquery cloning a block of element. select element acting weired，发现@malko 的answer，比删除再插入要优雅得多。这将其减少为

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

见JSFiddle

【讨论】：

【解决方案2】：

我认为您通过使用this 答案解决了选择选项问题。还有一个你需要在你的小提琴中解决的问题。问题是最后两列（fromHr 和 toHr）的时间选择器。

要解决此问题，您需要在 javascript 代码中添加以下行。

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

因为这些行是动态创建的。因此，您需要添加上述行以在 fromHr 和 toHr 中显示时间选择器。

看到这个工作FIDDLE

【讨论】：

【解决方案3】：

问题在于 jQuery Mobile 将许多元素（例如您的选择）重新创建为非本地小部件，然后将函数绑定到某些事件。当您只是克隆该行时，您没有获得事件绑定，因此您需要做的是实际附加原始 html - 它在重新呈现之前是什么 - 然后触发 create 方法：

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

我有一个勉强能用的小提琴，但我删除了很多你的代码，所以我可以很容易地说明我在说什么。 http://jsfiddle.net/Ad22d/81/

【讨论】：

是的，我不会为你编写整个页面的代码 - 我给了你一个起点。
我会尝试，如果它工作正常，我会接受你现在投票的答案。

【解决方案4】：

我遇到了同样的问题，并通过在克隆之前在原始选择框上调用 selectmenu("destroy") 来修复它，然后在附加克隆的选择后通过调用 selectmenu() 重新初始化选择框。

【讨论】：