在Jquery mobile的选择选项中发布 [英] Issue in select option in Jquery mobile

问题描述

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

Javascript代码像

  var b = 1; 
 
函数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。使用jQuery Uniform.js更改选择值

2。 jquery克隆一个元素块。选择元素代理

3。选择不工作后.clone

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

看来，jQuery手机并不能识别克隆的 selectmenu 。

你可以做的是删除selectmenu并重新添加只有HTML 选择，然后用 selectmenu（）

$（'。ui-select'，clone）.remove（）;
clone.cells [2] .appendChild（position）;
$（position）.selectmenu（）;


查看修改 JSFiddle

更新：

我只需遵循 jquery克隆一个元素块。选择元素动作并找到@ malko的答案，这比删除和重新插入要优雅得多。这将它减少到

$（position）.closest（'。ui-select'）。 replaceWith（位置）;
$（position）.selectmenu（）;


请参阅 JSFiddle

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.

解决方案

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

这篇关于在Jquery mobile的选择选项中发布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！