通过javascript创建新的div

Question

在表单中有一个 div 标签，其中一些字段具有，现在我可以从这个 div 标签创建更多字段，使用 javascript 从加号，我还可以通过减号删除 div 字段... 在主或第一个 DIV 标记中显示所有类别，但是当我通过加号创建另一个 DIV 时，所有类别都不会显示.. 请任何人告诉我如何解决这个问题...

js代码

<script src="{{ asset('js/jquery.min.js') }}"></script>
    <script type="text/javascript">
       $(document).ready(function(){
        var addButton = $('#addButton');
        var wrapper = $('#wrapper');
        var x = "{{$detail_count + 1}}";
            $(addButton).click(function(){
                x++;
                $(wrapper).append(
                    '<div class="form-group row">'+
                        '<label class="col-sm-1 col-form-label" style="text-align-last: right;">Category : </label>'+
                            '<div class="col-sm-2">'+
                                 '<select class="form-control" name="cat_id" id="category '+x+'">'+
                                    '<option value="" disabled selected>Select Category</option>'+
                                     'foreach($category as $key){'+
                                        '<option value="{{ $key->id }}">{{ $key->cat_nm }}</option>'+
                                   ' }' +

                              '</select>'+
                            '</div>'+

                        '<label class="col-sm-1 col-form-label" style="text-align-last: right;">SubCategory : </label>'+
                        '<div class="col-sm-2">'+
                            '<select class="form-control" id="subcategory '+x+'" name="sub_cat_id">'+
                                '<option value="" disabled selected>Subcategory from category</option>'+
                            '</select>'+
                        '</div>'+

                        '<label class="col-sm-1 col-form-label" style="text-align-last: right;">Product Price:</label>'+
                            '<div class="col-sm-2">'+
                               '<select class="form-control" id="productprice '+x+'" name="pro_price">  '+
                               '<option>Price from subcategory</option>'+
                               '</select>'+
                            '</div>'+
                        '<label class="col-sm-1 col-form-label" style="text-align-last: right;">Total : </label>'+
                        '<div class="col-sm-1">'+
                            '<input type="text" class="form-control" name="total[]" cat_id="total '+x+'">'+
                        '</div>'+
                        '<div class="col-sm-1">'+
                            '<a href="javascript:void(0)" id="remove" class="btn btn-danger btn-fill" title="Delete"><i class="fa fa-minus"></i></a>'+
                        '</div>'+
                    '</div>'
                );
            });

            $(wrapper).on('click','#remove',function(){
                if(confirm("Do you want to delete this row?")){
                    $(this).parent().parent().remove();
                }
            });
       });
    </script>

HTML 代码

 <div class="col-md-12 field-wrapper" id="wrapper">
                                              <div class="form-group row">
                                                <label class="col-sm-1 col-form-label" style="text-align-last: right;">Category : </label>
                                                    <div class="col-sm-2">
                                                         <select class="form-control" name="cat_id" id="category">
                                                            <option value="" disabled selected>Select Category</option>
                                                             @foreach($category as $key)
                                                                <option value="{{ $key->id }}">{{ $key->cat_nm }}</option>
                                                            @endforeach
                                                      </select>
                                                    </div>

                                                <label class="col-sm-1 col-form-label" style="text-align-last: right;">SubCategory : </label>
                                                <div class="col-sm-2">
                                                    <select class="form-control" id="subcategory" name="sub_cat_id">
                                                        <option value="" disabled selected>Subcategory from category</option>
                                                    </select>
                                                </div>

                                                <label class="col-sm-1 col-form-label" style="text-align-last: right;">Product Price:</label>
                                                    <div class="col-sm-2">
                                                       <select class="form-control" id="productprice" name="pro_price">  
                                                       <option>Price from subcategory</option>                                                  
                                                       </select>
                                                    </div>
                                                <label class="col-sm-1 col-form-label" style="text-align-last: right;">Total : </label>
                                                <div class="col-sm-1">
                                                    <input type="text" class="form-control" name="total[]">
                                                </div>
                                                <div class="col-sm-1">
                                                    <a href="javascript:void(0)" id="addButton" class="btn btn-primary btn-fill" title="Add Row"><i class="fa fa-plus"></i></a>
                                                </div>
                                            </div>
                                        </div>

第一个 DIV

另一个DIV

Answer 1

发生这种情况是因为您的 foreach 循环在您的 append() 内，并且它没有附加所有选项，只有最后一个值被附加，您可以在输出中看到。现在，要解决这个问题，请将此 foreach 循环放在您的外部附加这样的东西（我对 laravel 不太了解，所以可能存在语法错误）：

var select=""
foreach($category as $key){ 
//appending option in select variable
select+='<option value="{{ $key->id }}">{{ $key->cat_nm }}</option>'; 
}

然后传递这个值，即：select 附加如下内容：

$(wrapper).append(
    '<div class="form-group row">' +
    '<label class="col-sm-1 col-form-label" style="text-align-last: right;">Category : </label>' +
    '<div class="col-sm-2">' +
    '<select class="form-control" name="cat_id" id="category ' + x + '">' +
    '<option value="" disabled selected>Select Category</option>' +
    select + //<--pass here 
'</select>' + '</div>');