带有选定下拉值的jQuery克隆表行

Question

我想在克隆新行时将前一行的选定选项值克隆到新的原始数据。

 $("#btnAdd").on("click", function() { var $tableBody = $('#tbl').find("tbody"), $trLast = $tableBody.find("tr:last"), $trNew = $trLast.clone(); $trLast.after($trNew); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='tbl'> <tbody> <tr> <td> <p>Cell3</p> </td> <td> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </select> </td> </tr> </tbody> </table> <input type="button" id="btnAdd" value="Add New Row"></button>

我无法复制最后一行选定的下拉列表值，任何解决方案或克隆都不是这样做的方法？

Answer 1

您需要将select元素值设置为.clone()故意不复制textarea动态状态并select

注意：出于性能原因，某些表单元素的动态状态（例如，输入到textarea用户数据和对select进行的用户select ）不会复制到克隆元素中。 当克隆input元素时，元素的动态状态（例如，输入到 text input的用户数据和用户对checkbox所做的选择）保留在克隆的元素中。

用

$trNew.find('select').val($trLast.find('select').val());

 $("#btnAdd").on("click", function() { var $tableBody = $('#tbl').find("tbody"), $trLast = $tableBody.find("tr:last"), $trNew = $trLast.clone(); //Set updated value $trNew.find('select').val($trLast.find('select').val()) $trLast.after($trNew); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='tbl'> <tbody> <tr> <td> <p>Cell3</p> </td> <td> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </select> </td> </tr> </tbody> </table> <input type="button" id="btnAdd" value="Add New Row"></button>

---

如果 case tr有多个选择，则可以根据元素的index获取值。

$trNew.find('select').val(function(index, value) {
  return $trLast.find('select').eq(index).val();
});

 $("#btnAdd").on("click", function() { var $tableBody = $('#tbl').find("tbody"), $trLast = $tableBody.find("tr:last"), $trNew = $trLast.clone(); $trNew.find('select').val(function(index, value) { return $trLast.find('select').eq(index).val(); }); $trLast.after($trNew); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='tbl'> <tbody> <tr> <td> <p>Cell3</p> </td> <td> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </select> </td> <td> <select> <option value="red">Red</option> <option value="blue">Blue</option> </select> </td> </tr> </tbody> </table> <input type="button" id="btnAdd" value="Add New Row"></button>

Answer 2

您可以在追加之前修改$trNew元素。

在你的情况下：

$('select', $trNew).val($('select', $trLast).val());

Answer 3

我的解决方案是

$trNew.find('.bootstrap-select').next().remove();