[英]Add or Remove Dynamic Dependent Select Box
我有依赖 3 级 select 框的动态字段问题是依赖 select 框不工作
laravel刀片
<tbody class="addMoreProduct">
<tr>
<td>1</td>
<td>
<select name="categorie_id[0]" id="categorie_id" class="form-control categorie_id " >
<option value=""> choisir categorie </option>
@foreach ($categories as $categorie)
<option value="{{ $categorie->id }}">
{{ $categorie->categorie_name }}
</option>
@endforeach
</select>
</td>
<td> <select name="product_id[0]" id="categorie_id" class="form-control product_id " >
<option value=""> choisir Produit </option>
</select></td>
<td> <select name="size_id[0]" id="categorie_id" class="form-control size_id " >
<option value=""> choisir Designation </option>
</select></td>
<td>
<input type="number" name="quantity[0]" class="form-control" />
</td>
<td>
<input type="text" name="unit_price[0]" class="form-control" />
</td>
<td>
<input type="text" name="total_price[0]" class="form-control" readonly />
</td>
<td> <a href="#">Delete</a>
</td>
</tr>
</tbody>
添加新字段的脚本:
<script>
var i=0;
$('.add_more').on('click', function() {
++i;
var categorie = $('.categorie_id').html();
var numberofrow = ($('.addMoreProduct tr').length - 0) + 1;
var tr = '<tr><td class"no"">' + numberofrow + '</td>' +
'<td> <select class="form-control categorie_id " id="categorie_id" name="categorie_id['+i+']" >' + categorie +
'</select></td>' +
'<td> <select class="form-control product_id " id=product_id" name="product_id['+i+']" ></select></td>' +
'<td> <select class="form-control size_id " id="size_id" name="size_id['+i+']" ></select></td>' +
'<td> <input type="number" name="quantity['+i+']" class="form-control"></td>' +
'<td> <input type="number" name="unit_price['+i+']" class="form-control"></td>' +
'<td> <input type="number" name="total_price['+i+']" class="form-control"></td>' +
'<td> <a class="btn btn-danger btn-sm delete rounded-circle"><i class="fa fa-times-circle"></a></td>';
$('.addMoreProduct').append(tr);
})
</script>
处理依赖选择的脚本(问题基本上在这里与 i 变量有关)我想在此脚本中传递变量 i ,它代表每行中的 select
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('select[name="categorie_id['+i+']"]').on('change', function() {
var categorieID = jQuery(this).val();
if (categorieID) {
jQuery.ajax({
url: '/getProducts/' + categorieID,
type: "GET",
dataType: "json",
success: function(data) {
console.log(data);
jQuery('select[name="size_id['+i+']"]').empty();
jQuery('select[name="product_id['+i+']"]').empty();
jQuery.each(data, function(key, value) {
$('select[name="product_id['+i+']"]')
.append('<option value="' +
key + '">' + value + '</option>');
});
}
});
} else {
$('select[name="product_id['+i+']"]').empty();
$('select[name="size_id['+i+']"]').empty();
}
});
您可以使用starts with
来查找元素并将事件绑定到它们,而不是使用索引。
为所有必需元素找到最近的父元素,然后找到相对于该父元素的必需元素并相应地更新这些元素。
$(document).on('change', 'select[name^="categorie_id"]', function() { var curEle = jQuery(this); var categorieID = curEle.val(); var parentEle = curEle.closest('tr'); var prodEle = parentEle.find('select[name^="product_id"]'); var sizeEle = parentEle.find('select[name^="size_id"]'); sizeEle.empty(); prodEle.empty(); if (categorieID) { jQuery.ajax({ url: '/getProducts/' + categorieID, type: "GET", dataType: "json", success: function(data) { jQuery.each(data, function(key, value) { prodEle.append('<option value="' +key + '">' + value + '</option>'); }); } }); } });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.