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

{{{（“学生”）}
--选择一个选项--
@如果（学生）
@foreach（$student as$data）
{{$data->student_name}
@endforeach
@恩迪夫

添加更多学生

还有剧本：

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

$（文档）.ready（函数（）{
$（'#btn_add'）。单击（函数（）{
添加_行（）；
});
});
var-id=0；
函数add_row（）{
id++；
var html=''+
“{{{（“学生”）}”+
'' +
“--选择一个选项--”+
“@if（$student）”+
“@foreach（$student as$data）”+
“{{$data->student_name}”+
“@endforeach”+
“@endif”+
'' +
'' ;
$（“更多学生”）。附加（html）；
}

此代码不起作用。当我点击按钮时，什么也没发生。有人能帮我吗？

首先你忘记了

之前的

$（“#更多学生”）。追加（html）

如果您有多个

student\u profile\u id

则必须将其设置为类似

name=“student\u profile\u 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>


var student=eval（{！！$student！！}）；
$（文档）.ready（函数（）{
$（'#btn_add'）。单击（函数（）{
添加_行（）；
});
});
函数add_row（）{
var index=$（'input[name=“student_profile_id[]”），长度+1；
变量html=`
{{{（“学生”）}
--选择一个选项--`；
$。每个（学生、职能（ind、el））{
html+=`+el.student_name+`；
});
html+=`
`;
$（“#更多学生”）。附加（html）；
}
在Javascript内部呈现后，您试图注入刀片模板，这是不可能的。您应该在
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);
    }

var html=''+
“{{{（“学生”）}”+
'' +
“--选择一个选项--”
@如果（学生）
@foreach（$student as$data）
+“{{$data->student_name}”
@endforeach
@恩迪夫
+'' +
'';
函数add_row（）{
id++；
$（“#更多学生”）。附加（html）；
}
您声明id=“student\u id”的HTML变量将获得一个静态id，该id为字符串形式的“student\u id”，因为您没有以正确的格式提供它。您以不正确的方式混合了Blade模板和Javascript
    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);
    }