帶有下拉菜單的克隆表行不起作用

Question

我正在嘗試從模板中克隆一個具有選定值的行 。 我也想在克隆之后重置模板行 。

$("CloneButton").click(function() {

 var clonedRow = $('#rowtemplate').clone();
            clonedRow.html($(clonedRow).html().replace(/#/g, index));
            clonedRow.find('.project').text(project);
            clonedRow.find('.billingcodeCssId').val(timeCodeID);
            clonedRow.find('.billingcodeCss').text(timeCode);
            $('#Maintable').append(clonedRow.find('tr'));
});

當我嘗試克隆表行JS Fiddle時 ，選擇器沒有選擇該選擇器。 選擇器出了什么問題，以及如何使用所選值的下拉菜單克隆行？

Answer 1

嘗試此操作您的代碼中將需要進行許多更改..

1. 你寫$("CloneButton").click(function() { -它錯過了# ID選擇-所以你按一下按鈕，將不會觸發你需要寫$("#CloneButton").click(function() {
2. 在克隆和追加之前，您需要為兩個下拉菜單都設置selectd屬性。 您可以使用.attr("selected", true)設置selected屬性

下面的代碼對我來說很好用。 檢查工作代碼段

 $("#CloneButton").click(function() { var drp1Value = $('#rowtemplate tr').find('select').eq(0).val(); $("option[value=" + drp1Value + "]", $('#rowtemplate tr').find('select').eq(0)) .attr("selected", true).siblings() .removeAttr("selected"); var drp2Value = $('#rowtemplate tr').find('select').eq(1).val(); $("option[value=" + drp2Value + "]", $('#rowtemplate tr').find('select').eq(1)) .attr("selected", true).siblings() .removeAttr("selected"); var clonedRow = $('#rowtemplate tr').clone(); $('#Maintable').append(clonedRow); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <h4 >Main Table</h4> <table id="Maintable" > <th>Client</th><th>Heading</th><th>Heading</th><th>Total</th><th>Delete?</th> <tr> <td> <span class="project"> <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList"><option value="">Modeling</option> <option value="1">Ventosanzap</option> <option value="2">Modeling</option> <option value="3">Xilinx ISE</option> </select> </span> </td> <td> <input type="hidden" name="Records.Index" value="0"> <span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_0__SelectedBillingCodesFromList" name="Records[0].SelectedBillingCodesFromList"> <option value="">Budget-070</option> <option selected="selected" value="5">Budget-070</option> <option value="6">Budget-784</option> <option value="7">Cost Center-027</option> </select></span> </td> <td> <input name="Records[0].TimeRecords[0].ID" type="hidden" value=""> <input class="meters" name="Records[0].TimeRecords[0].Meters" type="text" value=""> </td> <td class="rowtotal">10.00</td> <td> <input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[0].DeleteRow" type="checkbox" value="true"><input name="Records[0].DeleteRow" type="hidden" value="false"> </td> </tr> <tr> <td><span class="project"> <select class="form-control projectcodeid" id="Records" name="Records[1].SelectedProjectFromList"><option value="">Xilinx ISE</option> <option value="1">Ventosanzap</option> <option value="2">Modeling</option> <option value="3">Xilinx ISE</option> </select></span> </td> <td> <input type="hidden" name="Records.Index" value="1"> <span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_1__SelectedBillingCodesFromList" name="Records[1].SelectedBillingCodesFromList"><option value="">Bill-727 </option> <option value="1">TIME CODE A </option> <option selected="selected" value="2">Bill-727 </option> <option value="3">Bill-561 </option> <option value="4">Bill-281 </option> </select></span> </td> <td> <input name="Records[1].TimeRecords[0].ID" type="hidden" value=""> <input class="meters" name="Records[1].TimeRecords[0].Meters" type="text" value=""> </td> <!-- added row totals rowtotalmeters--> <td class="rowtotal"> 0.00 </td> <td> <input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[1].DeleteRow" type="checkbox" value="true"><input name="Records[1].DeleteRow" type="hidden" value="false"> </td> </tr> </table> <!--*********** End Main Table--> <hr /> <h4>Row template</h4> <button type="button" id="CloneButton">Add Clone Row to table!</button> <table id="rowtemplate"> <tr> <td> <span class="project"> <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList"><option value="">Default</option> <option value="0">Null</option> <option value="1">Ventosanzap</option> <option value="2">Modeling</option> <option value="3">Xilinx ISE</option> </select></span> </td> <td> <input type="hidden" name="Records.Index" value="0"> <span class="billingcodeCss"> <select class="form-control timecodeDdlId" id="Records_0__SelectedBillingCodesFromList" name="Records[0].SelectedBillingCodesFromList"> <option value="">Default</option> <option value="0">Null</option> <option value="">Budget-070</option> <option value="5">Budget-070</option> <option value="6">Budget-784</option> <option value="7">Cost Center-027</option> </select></span> </td> <td> <input name="Records[0].TimeRecords[0].ID" type="hidden" value=""> <input class="meters" name="Records[0].TimeRecords[0].Meters" type="text" value=""> </td> <td class="rowtotal">0.00</td> <td> <input class="bs-checkbox mt-checkbox mt-checkbox-outline deleteRow" name="Records[0].DeleteRow" type="checkbox" value="true"><input name="Records[0].DeleteRow" type="hidden" value="false"> </td> </tr> </table> 

請檢查代碼段