Django-最简单二级联动

Django + ajax 实现一个最简单的二级联动

• model 设计

# 国家
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 Person(models.Model):
    name = models.CharField(max_length=100)
    country = models.ForeignKey(Country, on_delete=models.SET_NULL, null=True)
    city = models.ForeignKey(City, on_delete=models.SET_NULL, null=True)

    def __str__(self):
        return self.name

• view.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, 'hr/city_dropdown_list_options.html', {'cities': cities})

• city_dropdown_list_options.html

---------
{% for city in cities %}
{{ city.name }}
{% endfor %}

• 需要实现二级联动页面的 html

    {% csrf_token %}
    
      {{ form.as_table }}
    
    Save
    Nevermind
  

  
  

• form.py

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

    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')

• url.py

urlpatterns = [
    path('', views.PersonListView.as_view(), name='person_changelist'),
    path('add/', views.PersonCreateView.as_view(), name='person_add'),
    path('/', views.PersonUpdateView.as_view(), name='person_change'),
     #主要是下面这条
    path('ajax/load-cities/', views.load_cities, name='ajax_load_cities'),
]

效果

image.png

image.png