如何防止具有两个下拉菜单的表的第一行在更改时动态更改第二个下拉菜单的值? [英] How to prevent the first row of a table with two dropdown from dynamically change the value of second dropdown when changed?
问题描述
我有一个表，该表动态创建带有两个下拉列表的行.一个用于主题，另一个用于主题.当从表的下拉列表的第一行中选择一个主题值时，它将通过使用laravel从数据库进行ajax调用，在同一行的第二个下拉列表中使用适当的主题名称和ID填充主题下拉列表
I have a table which creates dynamically rows with two drop down lists. One for Subject and the next is for Topics. When a subject value is selected from first row of dropdown list of the table it will populate the topic drop down with appropriate topics name and ID in the second dropdown list in the same row through ajax call from database with 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.但是问题是当添加新行时出现的，那么在这里我将有两行具有四个相同的下拉列表，但是当我尝试从第二行更改主题名称时，这会导致两个主题行(即第一行和第二个，依此类推.那么我将如何实现呢?我希望每一行都依靠自己，即当我从第二行中选择一个主题时，不得随第一行中的主题发生变化.
. But the problem arises when a new row is added,then here i will have two rows with four the same dropdown,but when i tried to change subject name from the second row it results into change of both topic row i.e in first row and the second one and so on. So how will i achieve it? I want each row to depend itself i.e when i select a subject from second row must not change with the one in first row.
推荐答案
我们可以添加一个与(主题/主题)的每个列表匹配的通用唯一标识符.然后使用该标识符选择唯一的目标列表.在这里，我使用的是属性"data-uid"
We can add a common unique identifier matching each lists of (subject/topics). Then select the unique targeted list using that identifier. Here I'm using the attribute "data-uid"
我正在重复使用您的代码段"来解决问题！但是仍然没有人可以在这里执行这样的代码:)要查看实际效果，您可以访问此处底部的jSfiddle链接.
I'm reusing your "snippet" to solve it ! But still nobody can execute such code here :) To see it in action, you can visit the jSfiddle link at the bottom here.
var counter=0;
$('.addRow').on('click' ,function () {
addRow();
});
function addRow() {
var tr =
'<tr>' +
'<td>' +
'<select class="form-control subject_selected" name="subject[]" id="subject" data-uid="'+(counter+1)+'">' +
'<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" data-uid="'+(counter+1)+'">' +
'</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);
counter++;
}
$(document).on('change','.subject_selected' ,function () {
var SubjectID = $(this).val();
var targ=$(this).data('uid');
if(SubjectID){
$.ajax({
url: "{{ url('/topics') }}" + '/' + SubjectID,
typee: "GET",
dataType: "json",
success: function (data) {
$('.topic_selected[data-uid="' + targ + '"]').empty();
$.each(data,function (key , value) {
console.log("Key" + key ,"Value" + value);
$('.topic_selected[data-uid="' + targ + '"]').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" data-uid="0">
<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" data-uid="0">
</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在这个小提琴中，我使用数组替换Ajax数据响应: https://jsfiddle.net/f4ao1rwq/您会注意到应该添加到代码中的更改才能正常工作.
In this fiddle, I'm using an array to replace Ajax data response : https://jsfiddle.net/f4ao1rwq/ You will notice the changes that should be added to your code to work properly.
这篇关于如何防止具有两个下拉菜单的表的第一行在更改时动态更改第二个下拉菜单的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
