使用 javascript 添加下拉表单 - Laravel答案

【问题标题】：Append Dropdown Form using javascript - Laravel使用 javascript 添加下拉表单 - Laravel
【发布时间】：2020-09-05 02:44:29
【问题描述】：

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

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

这是我的代码

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

此代码不起作用。当我点击按钮时，什么也没有发生。谁能帮我解决这个问题？

【问题讨论】：

您声明 id ="student_id" 的 HTML 变量将获得一个静态 id，即“student_id”作为字符串，因为您没有以正确的格式给出它。
您以不正确的方式混合了 Blade 模板和 Javascript

标签： javascript php html laravel append

【解决方案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>

【讨论】：

【解决方案2】：

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

    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);
    }

【讨论】：