我有一個帶有下拉列表的表格。我想讓下拉菜單在單擊按鈕時多次出現。如下圖：如果我點擊“添加更多學生”按鈕，應該會出現另一個學生的下拉菜單。這是我的代碼<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>此代碼不起作用。當我點擊按鈕時，沒有任何反應。任何人都可以幫我解決這個問題嗎？
2 回答
絕地無雙
TA貢獻1946條經驗 獲得超4個贊
首先你忘記#了$("#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>
慕田峪4524236
TA貢獻1875條經驗 獲得超5個贊
您試圖在 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);
}
- 2 回答
- 0 關注
- 156 瀏覽
添加回答
舉報
0/150
提交
取消