我有一個(gè)帶有下拉列表的表格。我想讓下拉菜單在單擊按鈕時(shí)多次出現(xiàn)。如下圖：如果我點(diǎn)擊“添加更多學(xué)生”按鈕，應(yīng)該會(huì)出現(xiàn)另一個(gè)學(xué)生的下拉菜單。這是我的代碼<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>此代碼不起作用。當(dāng)我點(diǎn)擊按鈕時(shí)，沒有任何反應(yīng)。任何人都可以幫我解決這個(gè)問題嗎？
2 回答
絕地?zé)o雙
TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超4個(gè)贊
首先你忘記#了$("#more_student").append(html);，如果你有多個(gè)student_profile_id，那么你必須把它做成數(shù)組name="student_profile_id[]"，每個(gè)控件都有唯一的id
試試這個(gè)
<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貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超5個(gè)贊
您試圖在 Javascript 中渲染后注入 Blade 模板，這是不可能的。html您應(yīng)該在函數(shù)之外生成 var add_row，然后在單擊按鈕時(shí)將其插入：
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 關(guān)注
- 162 瀏覽
添加回答
舉報(bào)
0/150
提交
取消