Ajax响应追加到选择选项 [英] ajax response append to select options

问题描述

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

In my project, I'm using laravel as a backend. My case is, when the relevant page is loaded it sends an ajax request to get vehicle data, the vehicle has vehicle model & plate number properties. I want ajax response values show in a select field. I'm using jquery ajax to do this, but it does not append the values to the select field. There is no problem in the success response. how can append these values to a select options?

我的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><按钮class ="btn btn-sm" value ='+ value.platenumber +'id ="removeShow">< i class ="fa fa-times-circle" aria-hidden ="true"></i></button></div>'); 该代码部分正在工作，并将值成功附加到 div 元素.某种程度上，它不适用于选择字段.

$('#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>'); This code part is working and successfully append values to the div element. somehow it does not work for the select field.

感谢您的帮助.谢谢你.

Appreciate your help. thank you.

推荐答案

要将< option> 添加到现有的< select> 中，您可以使用以下任一方法执行此操作:

In order to add <option>s to your existing <select>, you can do this with either one of this approach:

jQuery标准方式:

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

或者您可以使用 jQuery和纯js组合来做到这一点:

Or you can do this with Jquery and pure js combination like this:

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

这篇关于Ajax响应追加到选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！