Laravel多行动态下拉列表

Question

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

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：

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动态填充为例外。

但是，我还具有当用户单击添加项目按钮时，附加了另外一行3个下拉菜单的功能。换句话说，另一个发票行项目。但是，因为它们都使用相同的ID，＃category，＃suppplier和#product，所以第一行之后的行不会按预期动态填充。当我提交表单并保存到数据库时，我也不知道如何使用控制器中的相同ID处理这些多个下拉列表。我该如何处理这个问题？

Answer 1

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