posts - 14,  comments - 0,  views - 21236

三级联动

前端需要的效果,省之后市之后现,创建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>
posted on   NeedEnjoyLife  阅读(791)  评论(0编辑  收藏  举报
编辑推荐:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示