javascript - ajax 响应附加到选择选项

Question

在我的项目中，我使用 Laravel 作为后端。我的情况是，当加载相关页面时，它会发送一个ajax请求来获取车辆数据，车辆具有车辆型号和车牌号属性。我希望 ajax 响应值显示在选择字段中。我使用 jquery ajax 来执行此操作，但它不会将值附加到选择字段。成功响应没有问题。如何将这些值附加到选择选项？

我的 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>发送至您现有的<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"));
});