javascript - 如何用 php 数组填充 javascript？

Question

我有以下 Javascript，它允许我在单击按钮时生成选择输入框并将选择框附加到 .cardday div:

        <script>
            $('input[name="queue"]').click(function(){
                $("<select name='select[]'>"+
                    "<option value='volvo'>Volvo</option>"+
                    "<option value='saab'>Saab</option>"+
                    "<option value='mercedes'>Mercedes</option>"+
                    "<option value='audi'>Audi</option>"+
                    "</select>").appendTo('.cardDay');
            })
</script>

我还有一个 PHP 数组，其中包含需要放入选择框中的值。该数组称为 $exerciseList

如何才能拥有它，以便当选择框添加到卡片 div 时，它会填充 PHP 数组 $exerciseList 键和值？

按要求提供完整文件:

    @extends('layouts.app')

@section('content')

<div class="card" style="padding:10px;">
        {!! Form::open(['action' => ['ExercisePlansController@store'], 'method' => 'POST']) !!}
        <center><h3 style="margin-top:10px;margin-bottom:20px;">Create Training Plan
                {{ Form::submit('Create this Plan', ['class' => 'btn btn-success', 'style' => 'float:right;align:right;margin-right:10px;']) }}
                </h3></center>
    <hr style="margin:10px;"></hr>


    <div class="form-group">
            {{ Form::label('title', 'Name') }}
            {{ Form::text('title', '', ['class' => 'form-control', 'placeholder' => 'Exercise Plan Name E.g Advanced Bulking']) }}
    </div>
    <div class="form-group">
        {{ Form::label('plan', 'Calender Plan') }}</br>
        <div class="col-md-2" style="padding:0px 10px 0px 0px;flex:0%;">
            <div class="cardDay" style="padding:10px;background-color:#c7e0fc;">

                <h3 style="margin-bottom:3px;">
                    <center>Monday</center>
                    <hr style="margin:10px;"></hr>
                </h3>
                <input class="btn btn-primary" style="font-family:Helvetica;padding:10px;margin:5px 0px 5px 0px;width:100%;" name="queue" value="Add Exercise">
                    <div class="panel-group">
                        <div class="panel panel-default">
                          <div class="panel-heading">
                            <h4 class="panel-title">
                              <a data-toggle="collapse" href="#collapse1001">New Exercise</a>
                            </h4>
                          </div>
                          <div id="collapse1001" class="panel-collapse collapse in">
                                <div class="panel-body">

                                    <div class="form-group">    
                                        {{ Form::label('exerciseList', 'Exercise') }} <br/>
                                        {{ Form::select('exerciseList[]', $exerciseList) }} <br/>
                                    </div>
                                    <div class="form-group">    
                                            {{ Form::label('description', 'Exercise Description') }} <br/>
                                            <a class="card-link"  href="./exercise/">Exercise Details</a><br/>
                                    </div>
                                    <div class="form-group">    
                                            {{ Form::label('reps', 'Number of Reps') }} <br/>
                                            {{ Form::text('reps[]', "") }} <br/>
                                    </div>
                                    <div class="form-group">    
                                            {{ Form::label('sets', 'Number of Sets') }} <br/>
                                            {{ Form::text('sets[]', '') }} <br/>
                                    </div>
                                    <div class="form-group">    
                                            {{ Form::label('weight', 'Weight (kg)') }} <br/>
                                            {{ Form::text('weight[]', '') }} <br/>
                                    </div>     
                                </div>

                          </div>
                        </div>
                      </div>
        </div>
            <center>
            {{ Form::hidden('_method', 'PUT') }}

            </center>
        {!! Form::close() !!}
        "{{ Form::label('exerciseList', 'Exercise') }} <br/>"+
        "{{ Form::select('exerciseList[]', $exerciseList) }} <br/>"+
        <script>
            $('input[name="queue"]').click(function(){
                $("<select name='select[]'>"+
                    "<option value='volvo'>Volvo</option>"+
                    "<option value='saab'>Saab</option>"+
                    "<option value='mercedes'>Mercedes</option>"+
                    "<option value='audi'>Audi</option>"+
                    "</select>").appendTo('.cardDay');
            })
        </script>
@endsection

Answer 1

让服务器生成 Javascript:

<script>
    $('input[name="queue"]').click(function(){
    $("<select name='select[]'>"+
    <?php foreach ($exerciseList as $value){ ?>
        "<option value='<?php echo $value; ?>'><?php echo $value; ?></option>"+
    <?php } ?>
    "</select>").appendTo('.cardDay');
    })
</script>

因此，当浏览器加载 Javascript 时，代码中将包含您的 PHP 变量值。