Laravel多行动态下拉列表 [英] Laravel multiple rows of dynamic dropdowns
问题描述
因此，在我的laravel视图中，我有一排三个下拉菜单，类别，供应商和产品，这些菜单根据用户的选择动态填充.
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.
<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>
jQuery处理动态填充:
The jQuery handling dynamic population:
<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:
jQuery that appends rows:
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();
});
3个下拉菜单的第一行的动态填充会通过jQuery动态填充(例外).
The dynamic population for the first row of 3 dropdown menus dynamically populates through jQuery as excepted.
但是，我还具有以下功能:当用户单击添加项目"按钮时，会附加另一行3个下拉菜单.换句话说，另一个发票行项目.但是，由于它们都使用相同的ID，#category，#supplier和#product，因此第一行之后的以下行不会按预期动态填充.当提交表单并保存到数据库时，我也不知道如何在控制器中使用相同的ID处理这些多个下拉列表.我应该如何解决这个问题?
However, I also have the functionality that when the user clicks the add item button, another row of 3 dropdown menus are appended. 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. 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. How should I be approaching this problem?
推荐答案
结果，我需要有一个计数器来为每个元素创建唯一的ID，然后将单独的侦听器附加到每个元素，以便它们都可以单独操作.
Turns out, I needed to have a counter to create unique ids for each element and then attach separate listeners to each, so they can all operate individually.
这篇关于Laravel多行动态下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
