Php Larvel多行动态下拉列表

因此，在我的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>

产品
{{Form:：label（'category'，'category'，array（'class'=>'col-xs-3控制标签'））}
选择一个类别
@foreach（$id=>$name的类别）
{{$name}
@endforeach
{{Form:：label（'supplier'，'supplier'，数组（'class'=>'col-xs-3控制标签'））}
{{Form:：label（'product'，'product'，数组（'class'=>'col-xs-3控制标签'））}
{{Form:：label（'quantity'，'quantity'，array（'class'=>'col-xs-3控制标签'））}
{{Form:：number（'quantity'，''，array（'class'=>'Form control'））}
去除

处理动态填充的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>

$（'#category'）。更改（函数（）{
$.get（“{url（'loadSuppliers'）}}，{selectedCategory:$（“#category”）.val（）}，函数（数据）{
$（“#供应商”）.empty（）；
$（“#产品”）.empty（）；
如果（数据）{
$（“#供应商”）。追加（“选择供应商”）；
$。每个（数据、函数（键、值）{
$（“#供应商”）。追加（“+value+”）；
});
}
});
});
$（“#供应商”）.变更（职能（）{
$.get（“{url（'loadProducts'）}}}，{selectedSupplier:$（“#supplier”）.val（）}，函数（数据）{
$（“#产品”）.empty（）；
如果（数据）{
$（“#产品”）。追加（“选择产品”）；
$。每个（数据、函数（键、值）{
$（“#产品”）。追加（“+value+”）；
});
}
});
});

附加行的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();
        });

var发票行项目模板=
'' +
'' +
'' +
“{Form:：label（'category'，'category'，array（'class'=>'col-xs-3控制标签'））}”+
'' +
“选择一个类别”+
“@foreach（$id=>$name）类别”+
“{{$name}}”+
“@endforeach”+
'' +
'' +
'' +
'' +
'' +
“{Form:：label（'supplier'，'supplier'，array（'class'=>'col-xs-3控制标签'））}”+
'' +
'' +
'' +
'' +
'' +
“{Form:：label（'product'，'product'，数组（'class'=>'col-xs-3控制标签'））}”+
'' +
'' +
'' +
'' +
'' +
“{Form:：label（'quantity'，'quantity'，array（'class'=>'col-xs-3控制标签'））}”+
{{Form:：number（'quantity'，''，array（'class'=>'Form control'））}+
'' +
'' +
'' +
“删除”+
'' +                              
'';           
$（“#添加发票项”）。在（'click'，函数（e）{
e、 预防默认值（）；
$（此）.before（发票\行\项目\模板）；
});
$（文档）。在（'单击'，'上。删除发票项'，函数（e）{
e、 预防默认值（）；
$（this）.parents（“#发票行项目”）.remove（）；
});

第一行（共3个）下拉菜单的动态填充通过jQuery动态填充（例外）

但是，我还有一个功能，当用户单击add item按钮时，会附加另一行3个下拉菜单。换句话说，是另一个发票行项目。但是，由于它们都使用相同的ID、#类别、#供应商和#产品，因此第一行之后的以下行不会按预期动态填充。当我提交表单并保存到数据库时，我也不知道如何处理控制器中具有相同ID的多个下拉列表。我应该如何处理这个问题

---

事实证明，我需要一个计数器为每个元素创建唯一的ID，然后为每个元素附加单独的侦听器，以便它们都可以单独操作。

更改$（'#category'）.Change（function（）{到$（'[name=category]'）。on（'Change'，function（）{类似地$（“#supplier”）.Change（function（）{到$（'[name=supplier]）。Change（function() {这是因为DOM中的每个元素的id都应该是唯一的。我们刚刚尝试了这个方法，但仍然存在相同的问题。3个下拉列表中的前几行可以正确地动态填充。当我单击“添加项”按钮时，出现了另一行下拉列表，所有下拉列表都与第一行具有相同的名称和id。下面的行不会动态填充。您可以吗将您的资料放在JSFIDLE上进行实况演示？我不确定如何进行JSFIDLE实况演示，因为类别、供应商和产品在控制器中从数据库中查询…，但我上传了一张图片以更好地说明情况。您如何添加另一行下拉列表？还包括该代码