三级联动

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