使用 javascript 添加下拉表单 - Laravel

Question

我有一个带有下拉列表的表格。我想让下拉菜单在单击按钮时多次出现。如下图：

如果我点击“添加更多学生”按钮，应该会出现另一个学生的下拉菜单。

这是我的代码

<form_answer id = "more_student" > 

     <div id ="student_id" class="form-group">

         <label class="form-control-label" for="student_id">{{ __('Student') }}</label>

              <select type="text" name="student_profile_id" id="student_id" class="form-control">

                 <option disabled selected> -- select an option -- </option>

                  @if($student)

                  @foreach($student as $data)

                    <option value="{{$data->id}}"> {{$data->student_name}}</option>

                  @endforeach

                  @endif

              </select>                             

      </div>

  <div class = "text-right">

      <a class="btn btn-success mt-4" id = "btn_add">Add More Student</a>

  </div>

和脚本：

<script>

    $(document).ready(function(){

        $('#btn_add').click(function(){

            add_row();

        });

});

    var id = 0;

    function add_row(){

        id++;

        var html =  '<div id ="student_id" class="form-group">' +

                        '<label class="form-control-label" for="student_id">{{ __("Student") }}</label>' +

                            '<select type="text" name="student_profile_id" id="student_id" class="form-control">' +

                                '<option disabled selected> -- select an option -- </option>' +

                                    '@if($student)' +

                                    '@foreach($student as $data)' +

                                        '<option value="{{$data->id}}"> {{$data->student_name}}</option>' +

                                    '@endforeach' +

                                    '@endif' +

                            '</select>' +

                    '</div>' ;

        $("more_student").append(html);

    }

    </script>

此代码不起作用。当我点击按钮时，没有任何反应。任何人都可以帮我解决这个问题吗？

Answer 1

首先你忘记#了$("#more_student").append(html);，如果你有多个student_profile_id，那么你必须把它做成数组name="student_profile_id[]"，每个控件都有唯一的id试试这个&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; var students =&nbsp; eval({!! $student !!});&nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#btn_add').click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; add_row();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; function add_row(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var index = $('input[name="student_profile_id[]"]').length+1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var html =&nbsp; `<div id="student_div_id`+index+`" class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="form-control-label" for="student_id">{{ __("Student") }}</label>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select type="text" name="student_profile_id[]" id="student_id`+index+`" class="form-control">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option disabled selected> -- select an option -- </option>`;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.each(students,function(ind,el)){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html+=`<option value="`+el.id+`"> `+el.student_name+`</option>`;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html+=`</select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>`;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#more_student").append(html);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script>

Answer 2

您试图在 Javascript 中渲染后注入 Blade 模板，这是不可能的。html您应该在函数之外生成 var add_row，然后在单击按钮时将其插入：&nbsp; &nbsp; var html = '<div id ="student_id" class="form-group">' +&nbsp; &nbsp; &nbsp; &nbsp; '<label class="form-control-label" for="student_id">{{ __("Student") }}</label>' +&nbsp; &nbsp; &nbsp; &nbsp; '<select type="text" name="student_profile_id" id="student_id" class="form-control">' +&nbsp; &nbsp; &nbsp; &nbsp; '<option disabled selected> -- select an option -- </option>'&nbsp; &nbsp; &nbsp; &nbsp; @if($student)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @foreach($student as $data)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; +'<option value="{{$data->id}}"> {{$data->student_name}}</option>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @endforeach&nbsp; &nbsp; &nbsp; &nbsp; @endif&nbsp; &nbsp; &nbsp; &nbsp; +'</select>' +&nbsp; &nbsp; '</div>';&nbsp; &nbsp; function add_row() {&nbsp; &nbsp; &nbsp; &nbsp; id++;&nbsp; &nbsp; &nbsp; &nbsp; $("#more_student").append(html);&nbsp; &nbsp; }