时间戳

首页 > 解决方案 > 使用 javascript 添加下拉表单 - Laravel

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

问题描述

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

在此处输入图像描述

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

这是我的代码

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

此代码不起作用。当我单击按钮时，没有任何反应。有人可以帮我吗？

标签： javascriptphphtmllaravelappend

解决方案

#首先你之前忘记了$("#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>

推荐阅读