models.py

Question

我正在使用django和postgresql。我正在处理一个3向相关的下拉列表。添加国家/地区选择后，省地区将根据所选国家/地区自动更新。选择省份后，仅在刷新页面时才打开县域。如果您能在这方面帮助我，我会很高兴。

models.py

from django.db import models

class Country(models.Model):
    name = models.CharField(max_length=30)

    def __str__(self):
        return self.name

class City(models.Model):
    country = models.ForeignKey(Country, on_delete=models.CASCADE)
    name = models.CharField(max_length=30)

    def __str__(self):
        return self.name

class District(models.Model):
    city = models.ForeignKey(City, on_delete=models.CASCADE)
    name = models.CharField(max_length=30)

    def __str__(self):
        return self.name

class Person(models.Model):
    name = models.CharField(max_length=100)
    birthdate = models.DateField(null=True, blank=True)
    country = models.ForeignKey(Country, on_delete=models.SET_NULL, null=True)
    city = models.ForeignKey(City, on_delete=models.SET_NULL, null=True)
    district = models.ForeignKey(District, on_delete=models.SET_NULL, null=True)

    def __str__(self):
        return self.name

forms.py

from django import forms
from .models import Person, Country, City, District

class PersonForm(forms.ModelForm):
    class Meta:
        model = Person
        fields = ('name', 'birthdate', 'country', 'city', 'district')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['city'].queryset = City.objects.none()

        if 'country' in self.data:
            try:
                country_id = int(self.data.get('country'))
                self.fields['city'].queryset = City.objects.filter(country_id=country_id).order_by('name')
            except (ValueError, TypeError):
                pass  # invalid input from the client; ignore and fallback to empty City queryset
        elif self.instance.pk:
            self.fields['city'].queryset = self.instance.country.city_set.order_by('name')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['district'].queryset = District.objects.none()

        if 'city' in self.data:
            try:
                city_id = int(self.data.get('city'))
                self.fields['district'].queryset = District.objects.filter(city_id=city_id).order_by('name')
            except (ValueError, TypeError):
                pass  # invalid input from the client; ignore and fallback to empty District queryset
        elif self.instance.pk:
            self.fields['district'].queryset = self.instance.city.district_set.order_by('name')

views.py

def load_cities(request):
    country_id = request.GET.get('country')
    cities = City.objects.filter(country_id=country_id).order_by('name')
    return render(request, 'neighbor/city_dropdown_list_options.html', {'cities': cities})

def load_districts(request):
    city_id = request.GET.get('city')
    districts = District.objects.filter(city_id=city_id).order_by('name')
    return render(request, 'neighbor/district_dropdown_list_options.html', {'districts': districts})

模板.html

<h2>Person Form</h2>
  <form method="post" id="personForm" data-cities-url="{% url 'ajax_load_cities' %}" novalidate>
    {% csrf_token %}
    <table>
      {{ form.as_table }}
    </table>
    <button type="submit">Save</button>
    <a href="{% url 'person_changelist' %}">Nevermind</a>
  </form>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script>
    $("#id_country").change(function () {
      var url = $("#personForm").attr("data-cities-url");
      var countryId = $(this).val();
      $.ajax({
        url: url,
        data: {
          'country': countryId
        },
        success: function (data) {
          $("#id_city").html(data);
        }
      });
    });
    $("#id_city").change(function () {
      var url = $("#personForm").attr("data-districts-url");
      var cityId = $(this).val();
      $.ajax({
        url: url,
        data: {
          'city': cityId
        },
        success: function (data) {
          $("#id_district").html(data);
        }
      });
    });
  </script>

我在这里指的是例子。

https://simpleisbetterthancomplex.com/tutorial/2018/01/29/how-to-implement-dependent-or-chained-dropdown-list-with-django.html

Answer 1

在templates.html文件中，您要调用相同的URL，因此，国家和城市字段的视图也将更改。您需要创建一个新的URL才能在load_district视图中处理请求。

进行以下更改

$("#id_city").change(function () {
  var url = $("#personForm").attr("data-districts-url");
  var cityId = $(this).val();
  $.ajax({
    url: '{% url 'ajax_load_districts' %}',
    data: {
      'city': cityId
    },
    success: function (data) {
      $("#id_district").html(data);
    }
  });
});

您不需要修改init（）方法两次，只需从froms.py中删除这两行。（第22和23行）
```
def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
```

添加新的URL来处理针对地区的Ajax请求

path('ajax/load-district/', views.load_districts, name='ajax_load_districts'),

您可以克隆此示例，我用过Country，City，Vanue ... https://github.com/masbhanoman/django_3way_chained_dropdown_list

Answer 2

非常感谢您的回答和 GitHub 链接。它与 3 个相关下拉列表完美配合。你仍然可以稍微改进你的 JS 代码：

var url = $("#personForm").attr("data-districts-url");

可以删除，因为您不使用该变量并直接设置一个url，顺便说一下，这使您的代码更具可读性。

如何使用Django实现三向依赖/链式下拉列表？

models.py

forms.py

views.py

模板.html

2 个答案: