Django积木块八——三级联动

三级联动

前端需要的效果，省之后市之后现，创建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>