三级联动
前端需要的效果,省之后市之后现,创建model,查询所有的省的信息,json传到前面,之后通过省的id找到对应的市,是用异步实现的。
# model
class Sheng(models.Model):
name = models.CharField(max_length=30)
class Shi(models.Model):
name = models.CharField(max_length=30)
sheng = models.ForeignKey(Sheng)
class Qu(models.Model):
name = models.CharField(max_length=30)
shi = models.ForeignKey(Shi)
# 生成表并添加数据
# url中
url(r'^$',index),
url(r'area/',pro),
url(r'city(\d+)/',city),
url(r'dis(\d+)/',dis),
# views
from django.http import JsonResponse
from django.shortcuts import render
def index(request):
return render(request,'area.html')
def pro(request):
arealist = Sheng.objects.all()
list = []
for item in arealist:
list.append({'id':item.id,'name':item.name})
print list
return JsonResponse({'data':list})
def city(request,id):
citylist = Shi.objects.filter(sheng_id=id)
list = []
for item in citylist:
list.append({'id': item.id, 'name': item.name})
print list
return JsonResponse({'data': list})
def dis(request,id):
dislist = Qu.objects.filter(shi_id=id)
list = []
for item in dislist:
list.append({'id': item.id, 'name': item.name})
print list
return JsonResponse({'data': list})
# html
<script src="{% static 'jquery-1.12.4.min.js' %}"></script>
<script>
$(function () {
//查询省信息
pro=$('#pro')
$.get('/area/',function (dic) {//{data:[{},{},{}]}
$.each(dic.data,function (index, item) {//
pro.append('<option value="'+item.id+'">'+item.name+'</option>')
})
})
$('#pro').change(function () {
$.get('/city'+$(this).val()+'/',function (dic) {
city = $('#city')
city.css('display','inline-block')
city.empty().append('<option value="">请选择市</option>')
dis = $('#dis')
dis.empty().append(' <option value="">请选择区</option>')
$.each(dic.data,function (index,item) {
city.append('<option value="'+item.id+'">'+item.name+'</option>')
})
})
})
$('#city').change(function () {
$.get('/dis'+$(this).val()+'/',function (dic) {
dis = $('#dis')
dis.css('display','inline-block')
dis.empty().append(' <option value="">请选择区</option>')
$.each(dic.data,function (index,item) {
dis.append('<option value="'+item.id+'">'+item.name+'</option>')
})
})
})
});
</script>
<select id="pro">
<option value="">请选择省</option>
</select>
<select id="city" style="display:none">
<option value="">请选择市</option>
</select>
<select id="dis" style="display: none">
<option value="">请选择区</option>
</select>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!