IWSPythoner

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::

省市区选择(get方法)

views

def areal1(request):
    return render(request,'booktest/areal1.html')

def sheng(request):
    list = AreaInfo.objects.filter(aParent__isnull=True)
    s_list = []
    for i in list:
        s_list.append({'id':i.id,'title':i.atitle})

    return JsonResponse({'sheng':s_list})

def shi(request,id):
    list = AreaInfo.objects.filter(aParent_id=id)
    s_list = []
    for i in list:
        s_list.append({'id': i.id, 'title': i.atitle})

    return JsonResponse({'shi': s_list})

templates

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $.get('/sheng/',function (data) {
                $.each(data.sheng,function (i,n) {
                    $('#sheng').append('<option value="'+n.id+'">'+n.title+'</option>')
                });
            });

            $('#sheng').change(function () {
                var id = $(this).val();
                $('#shi').empty().append('<option value="">请选择市</option>');
                $('#qu').empty().append('<option value="">请选择区</option>')
                if(id != '0'){
                    $.get('/shi'+id+'/',function (data) {
                        $.each(data.shi,function (i,n) {
                            $('#shi').append('<option value="'+n.id+'">'+n.title+'</option>');
                        });
                    });
                };
            });

             $('#shi').change(function () {
                var id = $(this).val();

                $('#qu').empty().append('<option value="">请选择区</option>')
                if(id != '0'){
                    $.get('/shi'+id+'/',function (data) {
                        $.each(data.shi,function (i,n) {
                            $('#qu').append('<option value="'+n.id+'">'+n.title+'</option>');
                        });
                    });
                };
            });
        });



    </script>
</head>
<body>
<label for="sheng"></label><select id="sheng">
    <option value="">请选择省</option>
</select>
<label for="shi"></label><select id="shi">
    <option value="">请选择市</option>
</select>
<label for="qu"></label><select id="qu">
    <option value="">请选择区</option>
</select>
</body>
</html>
posted on 2017-08-23 19:13  IWSPythoner  阅读(175)  评论(0)    收藏  举报