javascript - 如何在表中的每一行中创建动态依赖下拉列表而不影响laravel中的任何行
问题描述
这是我工作的成果
问题是每次我在下拉列表中选择时，另一个列都会受到影响
这是html和javascript的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<tbody class="assets" id="my_tab">
<tr class='listData'>
<td class="departmentName">
<select name="department[]" id="department_1" class="form-control departmentList"></select>
</td>
<td class="sample">
<select name="courseName[]" id="courseName_1" class="form-control courseName"></select>
</td>
<td><input type="text" id="time[]" name="time[]" class="form-control form-group"></td>
<td><input type="text" id="duration[]" name="duration[]" class="form-control form-group"></td>
<td>
<select name="professor" id="professor" class="form-control">
<option value="" disabled>Select Professor</option>
<option value="Pakistan">Pakistan</option>
<option value="India">India</option>
</select>
</td>
<td>
<a id="add_row" class="btn btn-primary waves-effect save_rows waves-light">
<i class="fa fa-plus"> Add</i>
</a>
</td>
</tr>
<tr class='listData'>
<td class="departmentName">
<select name="department[]" id="department_2" class="form-control departmentList"></select>
</td>
<td class="sample">
<select name="courseName[]" id="courseName_2" class="form-control courseName"></select>
</td>
<td><input type="text" id="time[]" name="time[]" class="form-control form-group"></td>
<td><input type="text" id="duration[]" name="duration[]" class="form-control form-group"></td>
<td>
<select name="professor" id="professor" class="form-control">
<option value="" disabled>Select Professor</option>
<option value="Pakistan">Pakistan</option>
<option value="India">India</option>
</select>
</td>
<td>
<a id="add_row" class="btn btn-primary waves-effect save_rows waves-light">
<i class="fa fa-plus"> Add</i>
</a>
</td>
</tr>
</tbody>
</body>
</html>`
这是我的 javascript 的代码，我使用选择的 Id 来触发，但是当我开始选择时，其他行会受到一些影响
var htmls = []
var sam = $('select[id^="department_"]')
$('body').on('change', sam, function() {
sam.each(function(index) {
var departmentID = $(this).val()
$.ajax({
dataType: 'json',
type: 'get',
url: '/getCourses',
data: {
'departmentID': departmentID,
},
success: function(data) {
htmls.push('<option value="" selected="" disabled="">Course</option>')
$.each(data, function(index, value) {
htmls.push('<option value="' + value.courseMasterID + '">' + value.CourseName + '</option>')
})
// $('.sample').each(function() {
// var ccurseName = $(this).find('select').html(htmls)
// })
$('select[id^="courseName_"]').html(htmls)
},
error: function(data) {
alert(data.responseText)
}
})
})
})