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

Posted 2023-02-24

【中文标题】Django的依赖链下拉选择列表 - 不工作

【英文标题】：Dependent Chained Dropdown Select List with Django - Not working

【发布时间】：2021-10-09 17:07:37

【问题描述】：

我正在尝试以 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)

【参考方案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);
        
      );
  );

【讨论】：

谢谢你的回答，穆萨！不幸的是，它不起作用...：S 我在创建选择之前和之后都尝试了您的代码，但它不起作用。我应该在 github 上分享整个项目吗？

你可以发一个页面链接，我看看能不能发现问题

您好，Musa，我在 github 上有我的项目，并将其更改为公开几天，以便您可以看到它。非常感谢！ github.com/alvarico509/TFM