django 下拉菜单html,怎么样在Django里实现联动下拉列表选项?

从属或链接下拉列表是一个特殊字段,它依赖于先前选择的字段,以显示已过滤选项的列表。最常见的地方就是通过地址里选择省份,然后显示出该省份下所有城市列表。

以下面的应用程序为例:

models.pyfrom 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 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)

def __str__(self):

return self.name

在应用程序中,我们将创建一个简单的表单处理来创建和更新人物对象。这个联动列表用来选择人物的国家和所在城市。

urls.pyfrom django.urls import include, path

from . import views

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

]

创建三个视图函数:

views.pyfrom django.views.generic import ListView, CreateView, UpdateView

from django.urls import reverse_lazy

from .models import Person

class PersonListView(ListView):

model = Person<

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django实现菜单的二级联动,可以使用 Ajax 技术实现。具体步骤如下: 1. 定义两个模型,例如 `Province` 和 `City`,它们之间通过外键关联。 ```python class Province(models.Model): name = models.CharField(max_length=50) class City(models.Model): name = models.CharField(max_length=50) province = models.ForeignKey(Province, on_delete=models.CASCADE) ``` 2. 在表单中添加两个下菜单,分别对应省份和城市。 ```html <form> <select id="province"> <option value="">选择省份</option> {% for province in provinces %} <option value="{{ province.id }}">{{ province.name }}</option> {% endfor %} </select> <select id="city" disabled> <option value="">选择城市</option> </select> </form> ``` 3. 编写 Ajax 请求处理视图函数,获取选中的省份,返回该省份下的所有城市。 ```python from django.http import JsonResponse def get_cities(request): province_id = request.GET.get('province_id') cities = City.objects.filter(province_id=province_id) city_list = [] for city in cities: city_list.append({'id': city.id, 'name': city.name}) return JsonResponse({'cities': city_list}) ``` 4. 在 JavaScript 中监听省份下菜单的 change 事件,发送 Ajax 请求获取该省份下的城市列表,并将其填充到城市下菜单中。 ```javascript $(document).ready(function() { $('#province').on('change', function() { var provinceId = $(this).val(); if (provinceId) { $.ajax({ url: '/get_cities/', data: {'province_id': provinceId}, dataType: 'json', success: function(data) { var citySelect = $('#city'); citySelect.empty(); citySelect.append('<option value="">选择城市</option>'); $.each(data.cities, function(index, city) { citySelect.append('<option value="' + city.id + '">' + city.name + '</option>'); }); citySelect.prop('disabled', false); } }); } else { $('#city').empty().prop('disabled', true); } }); }); ``` 在以上步骤中,注意需要在 urls.py 中注册 get_cities 视图函数的 URL。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值