javascript/jquery克隆不能在下拉列表中工作

我在最后一篇文章中提出了一个问题，我想要动态生成行并将数据复制到新行中。它工作正常，但只适用于文本字段。但是我的表单中也有下拉菜单，并且不会在新行中显示最后一行的选定选项。这是我的问题 add previous row data to dynamically generated row javascript/jquery克隆不能在下拉列表中工作

我有HTML代码：

<form> 
    <table border="1" id="engagements"> 
     <tr> 
      <th> 
       <input type="checkbox" onclick="checkAll(this)" /> 
      </th> 
      <th>Organization</th> 
      <th>Project</th> 
      <th>Product</th> 
      <th>Activity</th> 
     </tr> 
     <tr> 
      <td> 
       <input type="checkbox" onclick="checkAll(this)" /> 
      </td> 
      <td> 
       <select> 
        <option value = "1">One</option>/> 
        <option value = "1">two</option>/> 
      </td> 
      <td> 
       <input type="text" /> 
      </td> 
      <td> 
       <input type="text" /> 
      </td> 
      <td> 
       <input type="text" /> 
      </td> 
     </tr> 
    </table> 
    <select name="mode" id="mode"> 
     <option value="">Add More Rows with Same Data as Above</option> 
     <option value="1">1 More</option> 
     <option value="2">2 More</option> 
     <option value="3">3 More</option> 
     <option value="4">4 More</option> 
     <option value="5">5 More</option> 
    </select> 
</form>

和脚本代码：

$("#mode").on('change', function() { 
    var rows = parseInt(this.value); 
    console.log(rows); 
    var lastRow; 
    for (var i = 0; i < rows; i++) { 
     lastRow = $('#engagements tr').last().clone(); 
     $('#engagements tr').last().after(lastRow); 
    } 
});

JS提琴：http://jsfiddle.net/jW6eL/3/

来源

2013-06-24 Shauzab Ali Rawjani

http://bugs.jquery.com/ticket/1294 –

http://stackoverflow.com/a/743871/2220391和http://stackoverflow.com/a/4599828/2220391 – Spokey

试试这个

http://jsfiddle.net/jW6eL/7/

$("#mode").on('change', function() { 
    var rows = parseInt(this.value); 
    console.log(rows); 
    var lastRow; 
    for (var i = 0; i < rows; i++) { 
     lastRow = $('#engagements tr').last().html(); 
     $('#engagements tr:last').after('<tr>'+lastRow+'</tr>'); 
     $('#engagements tr:last').find('select').each(function(){ 
      var this_select=$(this); 
      this_select.val(this_select.closest('tr').prev().find('td:eq('+this_select.closest('td').index()+')').find('select').val()) 
     }) 
    } 
});

来源

2013-06-24 11:31:54

这只适用于第一个DDL但我有5个DDL的形式 –

http://jsfiddle.net/jW6eL/7/更新答案多选 –

性能方面的原因，jQuery的不守的选择，同时使元素的克隆。但是，您可以尝试使用

.clone(true)

这将使用下拉菜单复制所有平铺和数据。这样您可以使用事件并在下拉菜单中选择最后一个选项。

来源

2013-07-22 13:55:20 imonweb

javascript/jquery克隆不能在下拉列表中工作

回答

相关问题