[英]Laravel multiple rows of dynamic dropdowns
So in my laravel view, I have a row of three dropdown menus, category, supplier and products that dynamic populate based on what the user selects. 因此,在我的laravel视图中,我有一排三个下拉菜单,类别,供应商和产品,这些菜单根据用户的选择动态填充。
<fieldset>
<legend>Products</legend>
<div id="invoice-line-item" class="row row-eq-height">
<div class="col-md-2">
<div class="form-group">
{{ Form::label('category', "Category", array('class' => 'col-xs-3 control-label')) }}
<select name="category" id="category" class="form-control" >
<option value="none">Select a category</option>
@foreach($categories as $id => $name)
<option value="{{ $id }}">{{ $name }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
{{ Form::label('supplier', "Supplier", array('class' => 'col-xs-3 control-label')) }}
<select name="supplier" id="supplier" class="form-control"></select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
{{ Form::label('product', "Product", array('class' => 'col-xs-3 control-label')) }}
<select name="product" id="product" class="form-control"></select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
{{ Form::label('quantity', 'Quantity', array('class' => 'col-xs-3 control-label')) }}
{{ Form::number('quantity', '', array('class' => 'form-control')) }}
</div>
</div>
<div class="col-md-2" style="align-self:center;">
<button type="button" class="btn btn-xs btn-danger remove-invoice-item">Remove</button>
</div>
</div>
<div class="row">
<div class = "col-md-12">
<div class="form-group">
<a href="#" id="add-invoice-item" class="btn btn-sm btn-info">Add Item</a>
</div>
</div>
</div>
</fieldset>
The jQuery handling dynamic population: jQuery处理动态填充:
<script>
$('#category').change(function() {
$.get("{{ url('loadSuppliers') }}", { selectedCategory: $("#category").val() }, function(data) {
$("#supplier").empty();
$("#product").empty();
if (data) {
$("#supplier").append("<option value='none'>Select a supplier</option>");
$.each(data, function(key, value) {
$("#supplier").append("<option value = '" + key + "'>" + value + "</option>");
});
}
});
});
$("#supplier").change(function() {
$.get("{{ url('loadProducts') }}", { selectedSupplier: $("#supplier").val() }, function(data) {
$("#product").empty();
if (data) {
$("#product").append("<option value='none'>Select a product</option>");
$.each(data, function(key, value) {
$("#product").append("<option value = '" + key + "'>" + value + "</option>");
});
}
});
});
</script>
jQuery that appends rows: 附加行的jQuery:
var invoice_line_item_template =
'<div id="invoice-line-item" class="row row-eq-height">' +
'<div class="col-md-2">' +
'<div class="form-group">' +
'{{ Form::label('category', "Category", array('class' => 'col-xs-3 control-label')) }}' +
'<select name="category" id="category" class="form-control" >' +
'<option value="none">Select a category</option>' +
'@foreach($categories as $id => $name)' +
'<option value="{{ $id }}">{{ $name }}</option>' +
'@endforeach' +
'</select>' +
'</div>' +
'</div>' +
'<div class="col-md-2">' +
'<div class="form-group">' +
'{{ Form::label('supplier', "Supplier", array('class' => 'col-xs-3 control-label')) }}' +
'<select name="supplier" id="supplier" class="form-control"></select>' +
'</div>' +
'</div>' +
'<div class="col-md-2">' +
'<div class="form-group">' +
'{{ Form::label('product', "Product", array('class' => 'col-xs-3 control-label')) }}' +
'<select name="product" id="product" class="form-control"></select>' +
'</div>' +
'</div>' +
'<div class="col-md-2">' +
'<div class="form-group">' +
'{{ Form::label('quantity', 'Quantity', array('class' => 'col-xs-3 control-label')) }}' +
'{{ Form::number('quantity', '', array('class' => 'form-control')) }}' +
'</div>' +
'</div>' +
'<div class="col-md-2" style="align-self:center;">' +
'<button type="button" class="btn btn-xs btn-danger remove-invoice-item">Remove</button>' +
'</div>' +
'</div>';
$('#add-invoice-item').on('click', function(e) {
e.preventDefault();
$(this).before(invoice_line_item_template);
});
$(document).on('click', '.remove-invoice-item', function(e){
e.preventDefault();
$(this).parents('#invoice-line-item').remove();
});
The dynamic population for the first row of 3 dropdown menus dynamically populates through jQuery as excepted. 3个下拉菜单的第一行的动态填充通过jQuery动态填充(例外)。
However, I also have the functionality that when the user clicks the add item button, another row of 3 dropdown menus are appended. 但是,我还具有以下功能:当用户单击“添加项目”按钮时,会附加另一行3个下拉菜单。 In other words, another invoice-line-item.
换句话说,另一个发票行项目。 However, because they all use the same ids, #category, #supplier and #product, the following rows after the first do not dynamically populate as expected.
但是,由于它们都使用相同的ID,#category,#supplier和#product,因此第一行之后的以下行不会按预期动态填充。 I also don't know how I would be handling these multiple dropdowns with the same ids in the controller when I submit the form and save to the database.
当提交表单并保存到数据库时,我也不知道如何在控制器中使用相同的ID处理这些多个下拉列表。 How should I be approaching this problem?
我应该如何解决这个问题?
事实证明,我需要有一个计数器为每个元素创建唯一的ID,然后将单独的侦听器附加到每个元素,以便它们都可以单独操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.