Currently in my project, I am utilizing Laravel as a backend. The scenario is such that once the corresponding page loads, it triggers an ajax request to fetch vehicle data which consists of vehicle model and plate number properties. My aim is to display these ajax response values in a select field. Despite using jQuery ajax for this task, I am encountering difficulty with appending the values to the select field. While there are no issues with the success response, I am puzzled about how to append these values to the select options.
Snippet from my HTML :
<div class="raw">
<div class="form-group row" style="justify-content:center">
<div class="col-sm-6">
<label for="vehicleinfo">Select a Vehicle</label>
<select class="custom-select form-control" id="select_list">
<option>- Select a Vehicle -</option>
</select>
</div>
</div>
</div>Piece of JS code utilized:
//?show vehicles
$(document).ready(function(){
$.ajax({
type: "GET",
url: '/get_vehicles',
})
.done(function(res) {
$.each(res, function(index, value) {
$('#current_vehicle_list').append('<div id="item-box"><li>' + value.vehiclemodel +" "+ '('+ value.platenumber +')'+ '</li> <button class="btn btn-sm" value='+value.platenumber+' id="removeShow"><i class="fa fa-times-circle" aria-hidden="true"></i></button></div>');
let select_option = '';
select_option += "<option value='"+ value.vehiclemodel +"'>"+ value.platenumber +"</option>";
$('#selecet_list').append(select_option);
});
})
.fail(function(err) {
console.log(err);
});
});The line
$('#current_vehicle_list').append('<div id="item-box"><li>' + value.vehiclemodel +" "+ '('+ value.platenumber +')'+ '</li> <button class="btn btn-sm" value='+value.platenumber+' id="removeShow"><i class="fa fa-times-circle" aria-hidden="true"></i></button></div>');div element but fails to do so for the select field.
Your assistance on resolving this issue would be greatly appreciated. Thank you.