У меня есть два выпадающих списка, один вне динамической таблицы, другой внутри столбца таблицы. Теперь моя проблема состоит в том, как заполнить невыбранные данные одним раскрывающимся списком.
Что означает, например, если я выберу одно значение из 1-го раскрывающегося списка, оставшиеся невыбранные значения будут только Скопировано во 2-ое раскрывающееся меню (внутри динамического раскрывающегося списка). и если я нажму добавить строку, те же самые 2-ые выпадающие данные будут поступать динамически добавленными строками.
я надеюсь, что мой вопрос понятен.
вот мой пример Fiddle
Faild Fiddle Here
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#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>Second dropdown</option></select></td><td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter your text here' class='form-control input-md' id='acc_narrat' data-toggle='modal' data-target='#accnarratModal' /> </td><td><input name='cashdebt[" + i + "].name' type='text' placeholder='Amount 1' class='form-control input-md' id='cashdeb'data-action='sumDebit'></td><td><input name='cashcredit[" + i + "].name' type='text' placeholder='Amount 2' data-action='sumCredit' class='form-control input-md' readonly></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());
i++;
});
$("#delete_row").click(function() {
if (i > 1) {
$("#addr" + (i - 1)).html('');
i--;
}
});
});
<div class="form-group col-4" style="margin-bottom: 20px;">
<label class="col-sm-12 control-label p-sm-0 input-group"> First Dropdown:</label>
<select class="form-control selectsch_items" name="cashacc" id="cashacc" required>
<option value="">Choose an items</option>
<option value="acc1">joe 1</option>
<option value="acc2">joe 2</option>
<option value="acc3">joe 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">
Code
</th>
<th class="text-center">
Name*
</th>
<th class="text-center">
Text*
</th>
<th class="text-center">
Initial amount*
</th>
<th class="text-center">
First Payment
</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 Code' class="form-control" />
</td>
<td>
<select class="form-control" name="cashacc_sel" id="cashacc_sel">
<option value="">Second dropdown</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter your text here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="number" id="cashdeb" name='cashdebt' placeholder='Amount 1' data-action="sumDebit" class="form-control" />
</td>
<td>
<input type="number" id="cashcredit" name='cashcredit' placeholder='Amount 2' data-action="sumCredit" class="form-control" readonly />
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
</div>