[使用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

尝试这个

    <script>
        var students =  eval({!! $student !!});
        $(document).ready(function(){
            $('#btn_add').click(function(){
                add_row();
            });
        });

        function add_row(){
            var index = $('input[name="student_profile_id[]"]').length+1;
            var html =  `<div id="student_div_id`+index+`" class="form-group">
                            <label class="form-control-label" for="student_id">{{ __("Student") }}</label>'
                                <select type="text" name="student_profile_id[]" id="student_id`+index+`" class="form-control">
                                    <option disabled selected> -- select an option -- </option>`;
                                        $.each(students,function(ind,el)){
                                            html+=`<option value="`+el.id+`"> `+el.student_name+`</option>`;
                                        });
                        html+=`</select>
                        </div>`;
            $("#more_student").append(html);
        }
    </script>