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、#supplier 和 #product，所以第一行之后的后续行不会按预期动态填充。当我提交表单并保存到数据库时，我也不知道如何在控制器中处理这些具有相同 ID 的多个下拉列表。我应该如何处理这个问题？

Answer 1

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