使用Ajax和Django填充选择选项

Question

我正在尝试使用ajax和Django使用Select元素填充表单

我的代码如下，但它只显示一个结果，有时会有更多的结果。

const cliente = document.querySelector('#selectClienteID')
cliente.addEventListener('change', (event) => {
    event.preventDefault();
    $.ajax({
        type: "POST",
        data: $("#addPresupuesto").serialize(),
        url: '{% url "systemapp:add_presupuesto" %}',
        success: function (data) {
            const form_label = '<label for="vehiculo">Seleccionar vehículo</label>'+'<select name="vehiculo" class="form-control" id="vehiculo">'+`<option value="" selected="">Seleccionar vehículo</option>`

            for (x  in data.cars) {
                var car = data.cars[x]
                console.log(car['marca'])

                const option = `<option value="`+car['id']+`">`+car['marca']+`</option>`
                
                $('#showVehiculos').html(form_label + option);

            }
            
        },
        error: function () {
            console.log('Fail')
        },
    })
})

从我的视图中，我发送一个包含字典和要显示的值的列表：

form = AddPresupuesto()

if request.method == 'POST':
    if request.is_ajax():
        cliente = Cliente.objects.get(id=request.POST.get('cliente'))
        vehiculos = Vehiculo.objects.filter(cliente=cliente)
        cars_list = []
        for car in vehiculos:
            cars = {}
            cars['id'] = car.id
            cars['marca'] = f'{car.marca} {car.modelo}'
            cars_list.append(cars)
        
        return JsonResponse({'cars':cars_list})

但在模板中显示结果时，只显示一个

在这种情况下，它应该是两个，如控制台中所示：

有人能帮我一下吗

问候

Answer 1

您正在.html()内for-loop使用.html()，因此它将覆盖showVehiculos内的任何数据。相反，您将该部分移到for-loop外，然后使用+=将新的HTML附加到某个变量，即：options，然后将它们附加到您的div

演示代码

&13； 第13部分,；

//just demo data
var data = {
  "cars": [{
    "1": 12,
    "marca": "ac"
  }, {
    "2": 12,
    "marca": "ac2"
  }]
}

const form_label = '<label for="vehiculo">Seleccionar vehículo</label>' + '<select name="vehiculo" class="form-control" id="vehiculo">' + `<option value="" selected="">Seleccionar vehículo</option>`
let option = ""; //declare outside
for (x in data.cars) {
  var car = data.cars[x]
  //append new htmls inside options
  option += `<option value="` + car['id'] + `">` + car['marca'] + `</option>`
}
$('#showVehiculos').html(form_label + option); //add all inside div

；

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="showVehiculos">
</div>

；

和#13；