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

Answer 2

您试图在 Javascript 中渲染后注入 Blade 模板，这是不可能的。html您应该在函数之外生成 var add_row，然后在单击按钮时将其插入：

    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>';

    function add_row() {

        id++;

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

    }