У меня есть таблица, которая динамически создает строки с двумя выпадающими списками. Один для Тема , а следующий для Темы . Когда значение темы выбрано из первой строки раскрывающегося списка таблицы, оно заполнит раскрывающийся список topi c соответствующими именами и идентификаторами тем во втором раскрывающемся списке в той же строке через ajax вызов из базы данных с laravel
$('.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
. Но проблема возникает, когда добавляется новая строка, тогда здесь у меня будет две строки с четырьмя одинаковыми выпадающими, но когда я попытался изменить имя субъекта из второй строки, это приводит к изменению обеих строк topi c, т.е. в первой ряд и второй и тд. Так как же мне этого добиться? Я хочу, чтобы каждая строка зависела сама по себе, т.е. когда я выбираю тему из второй строки, она не должна меняться с той, что в первой строке