ajax ответ добавить, чтобы выбрать параметры

Question

В моем проекте я использую laravel как серверную часть. В моем случае, когда соответствующая страница загружена, она отправляет запрос ajax на получение данных о транспортном средстве, транспортное средство имеет свойства модели транспортного средства и номерных знаков. Я хочу, чтобы значения ответа ajax отображались в поле выбора. Я использую jquery ajax для этого, но он не добавляет значения в поле выбора. В успешном ответе нет проблем. как добавить эти значения к параметрам выбора?

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>

Мой JS:

//?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);
	});
});

$('#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. как-то не работает для поля выбора.

Благодарю за вашу помощь. Спасибо.

Answer 1

Чтобы добавить <option> s к существующему <select>, вы можете сделать это одним из следующих подходов:

Jquery стандартный способ:

$.each(res, function (index, value) {
  $('#select_list').append($('<option/>', { 
      value: index,
      text : value 
  }));
});

Или вы можете сделать это с помощью Jquery и чистой js комбинации вот так:

$.each(res, function (index, value) {
  $("#select_list").append(new Option("option text", "value"));
});

Answer 2

Вы определили id элемента в HTML как select_list.

Но вы используете id с именем selecet_list в своем jQuery скрипте.

Эту проблему необходимо решить.