Jquery 如何在调用/显示html元素时从数据库加载值

因此，我有一个字段来选择大小并填充股票输入，我添加了jquery，以便用户可以根据需要添加这些字段。但问题是，当我单击按钮添加这些字段时，数据库中的大小值数据没有加载。如何显示数据库中的数据以及这些字段的外观？我需要加载这些值{{$size['name']}}和{{$size['id']}}

这是我的剧本

$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div id="fieldExtra"><div class="form-group"><label class="col-md-3 col-sm-3 col-xs-12 control-label"></label><div class="col-md-2 col-sm-2 col-xs-12"><select class="form-control" name="color" id="color" required><option>Choose Size</option>@foreach ($sizes as $size)<option value="**{{ $size[\'id\'] }}**">**{{ $size[\'name\'] }}**</option>@endforeach</select></div><div class="col-md-2 col-sm-2 col-xs-12"><input type="text" class="form-control" name="stock" id="stock" placeholder="10" required></div><div class="col-md-2 col-sm-2 col-xs-12"><a href="javascript:void(0);" class="remove_button"><span class="glyphicon glyphicon-minus grey" aria-hidden="true" style="font-size:20px;top:6px;"></span></a></div></div><!-- form-group --></div>'; //New input field html
        var x = 1; //Initial field counter is 1

        //Once add button is clicked
        $(addButton).click(function(){
            //Check maximum number of input fields
            if(x < maxField){
                x++; //Increment field counter
                $(wrapper).append(fieldHTML); //Add field html
            }
        });

        //Once remove button is clicked
        $(wrapper).on('click', '.remove_button', function(e){
            e.preventDefault();
            $("#fieldExtra").remove(); //Remove field html
            x--; //Decrement field counter
        });
    });

$（文档）.ready（函数（）{
var maxField=10；//输入字段增量限制
var addButton=$（'.add_button'）；//添加按钮选择器
var wrapper=$（'.field_wrapper'）；//输入字段wrapper
var fieldHTML='选择Size@foreach（$sizes as$size）**{{$size[\'name\']}}**@endforeach'；//新输入字段html
var x=1；//初始字段计数器为1
//单击“添加”按钮后
$（添加按钮）。单击（函数（）{
//检查输入字段的最大数量
if（x

这是我的html：

<div class="field_wrapper">
<div><div class="form-group">
    <label class="col-md-3 col-sm-3 col-xs-12 control-label">Size & Stock <span class="required">*</span></label>
    <div class="col-md-2 col-sm-2 col-xs-12">
        <select class="form-control" name="size[]" id="color" required>
            <option>Choose Size</option>
            @foreach ($sizes as $size)
            <option value="{{ $size['id'] }}">{{ $size['name'] }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-2 col-sm-2 col-xs-12">
        <input type="text" class="form-control" name="stock[]" id="stock" placeholder="10" required>
    </div>
    <div class="col-md-2 col-sm-2 col-xs-12">
        <a href="javascript:void(0);" class="add_button" title="Add field">
            <span class="glyphicon glyphicon-plus red" aria-hidden="true" style="font-size:20px;top:6px;"></span>
        </a>
    </div>
</div></div><!-- form-group -->

尺寸和库存*
选择大小
@foreach（$size作为$size）
{{$size['name']}
@endforeach

作为您的第一个选择框，即：

颜色对于所有div都是相同的，您可以使用
clone（）
方法获得该选择的克隆，而不是在jquery代码中写入laravel代码，然后将其传递给动态生成的html代码

另外，在
remove_按钮
事件中，您需要使用
$（this）.closest（.fieldExtra”）.remove（）
仅删除单击“删除”按钮的div

演示代码：


$（文档）.ready（函数（）{
//获取第一个selectbox的克隆
var slects=$（'.outers'）.find（“select”）.clone（）；
var maxField=10；//输入字段增量限制
var addButton=$（'.add_button'）；//添加按钮选择器
var wrapper=$（'.field_wrapper'）；//输入字段wrapper
var fieldHTML=“”
fieldHTML+='''''+$（slects）.html（）+''''//将其添加到选择框中
fieldHTML+=''；//新输入字段html
var x=1；
//单击“添加”按钮后
$（添加按钮）。单击（函数（）{
if（x

尺寸和库存*
选择大小
X
Y
Z
作为您的第一个选择框，即：
颜色对于所有div都是相同的，您可以使用
clone（）
方法获得该选择的克隆，而不是在jquery代码中写入laravel代码，然后将其传递给动态生成的html代码

另外，在
remove_按钮
事件中，您需要使用
$（this）.closest（.fieldExtra”）.remove（）
仅删除单击“删除”按钮的div

演示代码：


$（文档）.ready（函数（）{
//获取第一个selectbox的克隆
var slects=$（'.outers'）.find（“select”）.clone（）；
var maxField=10；//输入字段增量限制
var addButton=$（'.add_button'）；//添加按钮选择器
var wrapper=$（'.field_wrapper'）；//输入字段wrapper
var fieldHTML=“”
fieldHTML+='''''+$（slects）.html（）+''''//将其添加到选择框中
fieldHTML+=''；//新输入字段html
var x=1；
//单击“添加”按钮后
$（添加按钮）。单击（函数（）{
if（x

尺寸和库存*
选择大小
X
Y
Z
Hi，你也可以显示html吗？Hi，我添加了html部分Hi，你也可以显示html吗？Hi，我添加了html部分