Django的依赖链下拉选择列表 - 不工作

Question

我正在尝试以 django 形式构建一个依赖下拉列表，但它不起作用。我关注了视频和教程，但没有运气。

我想选择汽车的品牌（品牌），然后选择汽车的型号。当然，型号取决于汽车的品牌。

我已经按照这个教程https://python.plainenglish.io/python-and-django-create-a-dependent-chained-dropdown-select-list-b2c796f5a11

状态：“制作”下拉菜单工作正常。 “模型”下拉菜单从不显示任何内容。 它只是不起作用，但没有显示错误......：S

models.py

from django.db import models
from django import forms

class Vehicle(models.Model):
    make = forms.CharField(max_length=30)
    model = forms.CharField(max_length=30)
    ...omitted

forms.py

from django import forms
from .models import Vehicle
import json    

def readJson(filename):
    with open(filename, 'r') as fp:
        return json.load(fp)

def get_make():
    """ GET MAKE SELECTION """
    filepath = '/Users/alvarolozanoalonso/desktop/project_tfm/tfm/JSON/make_model_A.json'
    all_data = readJson(filepath)
    all_makes = [('-----', '---Select a Make---')]

    for x in all_data:
        if (x['make_name'], x['make_name']) in all_makes:
            continue
            else:
                y = (x['make_name'], x['make_name'])
                all_makes.append(y)

# here I have also tried "all_makes.append(x['make_name'])

    
            return all_makes
    

class VehicleForm(forms.ModelForm):
    make = forms.ChoiceField(
                    choices = get_make(),
                    required = False,
                    label='Make:',
                    widget=forms.Select(attrs={'class': 'form-control', 'id': 'id_make'}),
                    )
...omitted



    class Meta:
            model = Vehicle
            fields = ['make', 'is_new', 'body_type', 'fuel_type', 'exterior_color', 'transmission', 'wheel_system', 'engine_type',
                      'horsepower', 'engine_displacement', 'mileage', 'transmission_display', 'year', 'fuel_tank_volume',
                      'city_fuel_economy', 'highway_fuel_economy', 'maximum_seating']

模型.HTML

{% block javascript %}
<script>
          $("#id_make").change(function () {
              var makeId = $(this).val();
              $.ajax({
                type: "POST",
                url: "{% url 'get-model' %}",
                data: {
                  'csrfmiddlewaretoken': '{{ csrf_token }}',
                  'make': makeId,
                },
                success: function (data) {
                  console.log(data.models);
                  let html_data = '<option value="">-------</option>';
                  data.models.forEach(function (data) {
                      html_data += `<option value="${data}">${data}</option>`
                  });
                  $("#id_model").html(html_data);
                }
              });
});
</script>
{% endblock javascript %}

<form class="" action="" method="post">
          {% csrf_token %}
          {% for error in errors  %}
          <div class="alert alert-danger mb-4" role="alert">
            <strong>{{ error }}</strong>
          </div>
          {% endfor %}
          <div class="form-row">

            <div class="form-group col-md-6">
              <label>Status:</label>
                {{ form.make }}
            </div>

            <div class="form-group col-lg-6">
              <label >Model:</label>
              <select id="id_model" class="form-control" name="state">
                <option value="-----">Select Model</option>
              </select>
            </div>
            
            ...omitted

            <div class="form-group col-md-6">
              <button type="submit" class="btn btn-primary">Calculate</button>
            </div>
        </form>

views.py

def model(request):
    context = {}
    if request.method == 'GET':
           form  = VehicleForm()
           context['form'] = form
           return render(request, 'model.html', context)
    if request.method == 'POST':
        form  = VehicleForm(request.POST)
        if form.is_valid():
            return render(request, 'model.html', context)

def getModel(request):
    make = request.POST.get('make')
    models = return_model_by_make(make)
    return JsonResponse({'models': models})

Answer 1

id_make 的更改处理程序是在 DOM 中创建选择之前附加的，因此您的事件处理程序不会触发。
您可以使用事件委托在创建元素之前设置事件处理程序

  $(document).on('change', "#id_make", function () {
      var makeId = $(this).val();
      $.ajax({
        type: "POST",
        url: "{% url 'get-model' %}",
        data: {
          'csrfmiddlewaretoken': '{{ csrf_token }}',
          'make': makeId,
        },
        success: function (data) {
          console.log(data.models);
          let html_data = '<option value="">-------</option>';
          data.models.forEach(function (data) {
              html_data += `<option value="${data}">${data}</option>`
          });
          $("#id_model").html(html_data);
        }
      });
  });