jQuery - 如何通過動態表中的文本框顯示下拉選擇的值

Question

我創建了動態表，我想在文本框中顯示選定的下拉值，我嘗試了很多使用 javascripts 和 jQuery 的方法，但它在我的動態表中不起作用..

我只想在我的文本框中傳遞值

你能幫我嗎？

注意：僅傳遞值表下拉列表..

這是我詳細的小提琴

小提琴

Jquery 動態表創建代碼

 $(document).ready(function() { $("#cashacc_sel").html($('#cashacc').html()); var i = 1; $("#add_row").click(function() { var oSelectedValue = $('#cashacc').val(); $('#addr' + i).html("<td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter code' id='cashacc_code' class='form-control input-md'/></td><td><select class='form-control input-md' name='cashpayment[" + i + "].name' id='dynamic_sel'><option>Choose an items</option></select></td>"); // {/* <td>" + (i + 1) + "</td> */} $("#cashacc_sel").find("select").append().appendTo($("#dynamic_sel")); $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>'); // $('#cashacc_sel').append($('#dynamic_sel').html()); $("select[name='cashpayment[" + i + "].name']").html($('#cashacc option:not(:selected)')); $("#cashacc").html($('#cashacc_sel').html()); $("#cashacc").val(oSelectedValue); i++; }); $("#delete_row").click(function() { if (i > 1) { $("#addr" + (i - 1)).html(''); i--; } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group col-4" style="margin-bottom: 20px;"> <label class="col-sm-12 control-label p-sm-0 input-group">Cash Account:</label> <select class="form-control selectsch_items" name="cashacc" id="cashacc" required> <option value="">Choose an items</option> <option value="acc1">Account 1</option> <option value="acc2">Account 2</option> <option value="acc3">Account 3</option> </select> </div> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic"> <thead> <tr style="background-color: #680779; color: #fff;"> <th class="text-center"> Account Code </th> <th class="text-center"> A/c Name* </th> </tr> </thead> <tbody> <a id="add_row" class="btn btn-default pull-left adRow">Add Row</a><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a> <tr id='addr0'> <td> <input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" /> </td> <td> <select class="form-control" name="cashacc_sel" id="cashacc_sel"> <option value="">Select A/c name</option> <option value="1">Plumz</option> <option value="2">Plumz 2</option> <option value="3">Plumz 3</option> </select> </td> </tr> <tr id='addr1'></tr> </tbody> </table> </div> </div> </div>

Answer 1

我想你需要這樣的東西。

 $(document).ready(function() { $("#cashacc_sel").html($('#cashacc').html()); var i = 1; $("#add_row").click(function() { var oSelectedValue = $('#cashacc').val(); $('#addr' + i).html("<td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter code' id='cashacc_code' class='sel_text form-control input-md'/></td><td><select class='sel_sel cashacc_sel form-control input-md' name='cashpayment[" + i + "].name' id='dynamic_sel'><option>Choose an items</option></select></td>"); // {/* <td>" + (i + 1) + "</td> */} $("#cashacc_sel").find("select").append().appendTo($("#dynamic_sel")); $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>'); // $('#cashacc_sel').append($('#dynamic_sel').html()); $("select[name='cashpayment[" + i + "].name']").html($('#cashacc option:not(:selected)')); $("#cashacc").html($('#cashacc_sel').html()); $("#cashacc").val(oSelectedValue); bindScript(); i++; }); $("#delete_row").click(function() { if (i > 1) { $("#addr" + (i - 1)).html(''); i--; } }); bindScript(); }); function bindScript() { $(document).find('.sel_sel').on("change", function () { $(this).parent().parent().find('.sel_text').val($(this).val()); }) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="form-group col-4" style="margin-bottom: 20px;"> <label class="col-sm-12 control-label p-sm-0 input-group">Cash Account:</label> <select class="form-control selectsch_items" name="cashacc" id="cashacc" required> <option value="">Choose an items</option> <option value="acc1">Account 1</option> <option value="acc2">Account 2</option> <option value="acc3">Account 3</option> </select> </div> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic"> <thead> <tr style="background-color: #680779; color: #fff;"> <th class="text-center"> Account Code </th> <th class="text-center"> A/c Name* </th> </tr> </thead> <tbody> <a id="add_row" class="btn btn-default pull-left adRow">Add Row</a><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a> <tr id='addr0'> <td> <input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter A/c Code' class="form-control sel_text" /> </td> <td> <select class="form-control sel_sel" name="cashacc_sel" id="cashacc_sel"> <option value="">Select A/c name</option> <option value="1">Plumz</option> <option value="2">Plumz 2</option> <option value="3">Plumz 3</option> </select> </td> </tr> <tr id='addr1'></tr> </tbody> </table> </div> </div> </div>

Answer 2

您需要使用克隆而不是 ID

 $(function() { // on page load $("#add_row").on("click",function() { // on click of add $("tbody").append($("tbody tr").first().clone()); // clone and append $("tbody tr").last().find("select").val($("#cashacc").val()); // set the value }); $("#delete_row").on("click",function() { if ($("tbody tr").length > 1) { // remove last entry if more than one $("tbody tr").last().remove() } }); // copy the value from select to input field $("tbody").on("change","[name=cashacc_sel]",function() { $(this).closest("tr").find("[name=cashacc_code]").val(this.value); }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group col-4" style="margin-bottom: 20px;"> <label class="col-sm-12 control-label p-sm-0 input-group">Cash Account:</label> <select class="form-control selectsch_items" name="cashacc" id="cashacc" required> <option value="">Choose an item</option> <option value="acc1">Account 1</option> <option value="acc2">Account 2</option> <option value="acc3">Account 3</option> </select> </div> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic"> <thead> <tr> <td><a id="add_row" class="btn btn-default pull-left adRow">Add Row</a></td> <td><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a></td> </tr> <tr style="background-color: #680779; color: #fff;"> <th class="text-center"> Account Code </th> <th class="text-center"> A/c Name* </th> </tr> </thead> <tbody> <tr> <td> <input type="text" name='cashacc_code' placeholder='Enter A/c Code' class="form-control" /> </td> <td> <select class="form-control" name="cashacc_sel"> <option value="">Select A/c name</option> <option value="acc1">Plumz</option> <option value="acc2">Plumz 2</option> <option value="acc3">Plumz 3</option> </select> </td> </tr> </tbody> </table> </div> </div> </div>