【发布时间】：2020-05-05 22:32:09
【问题描述】：
我有一个表格，它使用两个下拉列表动态创建行。一个用于主题，下一个用于主题。 当从表的下拉列表的第一行中选择主题值时，它将通过使用 laravel 的数据库中的 ajax 调用在同一行的第二个下拉列表中使用适当的主题名称和 ID 填充主题下拉列表
$('.addRow').on('click' ,function () {
addRow();
});
function addRow() {
var tr =
'<tr>' +
'<td>' +
'<select class="form-control subject_selected" name="subject[]" id="subject">' +
'<option value=" ">--Select Subject-----</option>' +
"@foreach($subject_list as $subject)" +
"<option value='{{ $subject-> id }}'>{{ $subject -> SubjectName }}</option>" +
"@endforeach"+
'</select>' +
'</td>' +
'<td>' +
'<select class="form-control topic_selected" name="topic[]" id="topic">' +
'</select>' +
'</td>' +
'<td>' +
'<input type="text" class="form-control" name="Amount[]" id="Amount"/>'+
'</td>' +
'<td>' +
'<a href="javascript:void(0)" class="btn btn-danger remove">X</a>' +
'</td>' +
'</tr>';
$('tbody').append(tr);
}
$(document).on('change','.subject_selected' ,function () {
var SubjectID = $(this).val();
if(SubjectID){
$.ajax({
url: "{{ url('/topics') }}" + '/' + SubjectID,
typee: "GET",
dataType: "json",
success: function (data) {
$('.topic_selected').empty();
$.each(data,function (key , value) {
console.log("Key" + key ,"Value" + value);
$('.topic_selected').append('<option value="' + key + '">' + value+ '</option>');
});
},
error: function (data) {
console.log(data)
}
})
}else {
$('.topic_selected').empty();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="table_tuition_fee">
<thead>
<tr>
<td><label for="subject">Subject</label></td>
<td><label for="topic">Topic</label></td>
<td><label for="Amount">Amount</label></td>
<td><a class="bg-light btn btn-info addRow" href="#"><i class="fa fa-plus"></i></a></td>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="form-control subject_selected" name="subject[]" id="subject">
<option value=" ">---Select Subject---</option>
@foreach($subject_list as $subject)
<option value="{{ $subject->id }}">{{ $subject->SubjectName }}</option>
@endforeach
</select>
</td>
<td>
<select class="form-control topic_selected" name="topic[]" id="topic">
</select>
</td>
<td>
<input type="text" class="form-control" name="Amount[]" id="Amount"/>
</td>
<td>
<a href="javascript:void(0)" class="btn btn-danger remove">X</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td style="border: none"></td>
<td style="border: none"></td>
<td style="border: none"></td>
<td><button class="btn btn-success" id="add_student">SEND</button></td>
</tr>
</tfoot>
</table。 但是当添加新行时会出现问题，然后在这里我将有两行有四个相同的下拉菜单，但是当我尝试从第二行更改主题名称时，它会导致两个主题行的更改，即第一行和第二个等等。 那么我将如何实现呢？我希望每一行都依赖于自己，即当我从第二行中选择一个主题时，不能与第一行中的主题一起改变。
【问题讨论】：
-
任何有帮助的人..我花了将近一天的时间没有解决方案
-
这里需要一个动态ID来区分目标主题列表