通过javascript创建新div

在表单中有一个一个div标记，其中一些字段有，现在我可以从这个一个div标记创建更多的字段，使用javascript从加号创建，我还可以通过减号删除div字段。。。 在主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>

第一组

另一个DIVs

---

发生这种情况是因为您的foreach循环在append中，并且它没有追加all选项，只有最后一个值被追加，您可以在输出中看到。现在，要解决这个问题，请将此foreach循环置于append之外，类似这样的内容我对laravel不太了解，因此可能存在语法错误：

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

---

我正在按你说的我做尝试..它是ohkk：：按你说的我..for循环正在工作..我如何才能在append this for loop@Swati中添加？你不需要append for循环，只需在你的append代码中添加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>');