django之城市联动

django之城市联动

1.模型部分

# 城市
class Citys(models.Model):
    # 城市名
    name = models.CharField(max_length=20)
    # 城市等级
    level = models.IntegerField()
    # 父级城市id
    upid = models.IntegerField()



2.路由部分
# 三级联动测试
url(r'^getCitys/$',views.getCitys,name="myhome_getCitys"),
#ajax获取二级城市
url(r'^gettwoCitys/$',views.gettwoCitys,name="myhome_gettwoCitys"),



3.视图部分


# 三级联动城市测试
def getCitys(request):
    # 获取一级城市列表
    data = models.Citys.objects.filter(level=1)
    # 返回模板,查询到的一级城市数据
    return render(request,'citys.html',{'data':data})

def gettwoCitys(request):
    # 获取前台网页提交的cid
    cid = request.GET.get('cid')
    # 根据cid获取二级城市
    data = models.Citys.objects.filter(upid=cid).values()
    # 返回json数据
    return JsonResponse(list(data),safe=False)



4.模板部分


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>城市联动</title>
</head>
<body>

    <select>
        {% for i in data %}
        <option value="{{i.id}}">{{i.name}}</option>
        {% endfor %}
    </select>

    <script type="text/javascript" src="/static/register/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $('body').on('click','select',function(){
            $(this).nextAll().remove();
            // 获取当前选中的value值
            var cid = $(this).val();
            // 创建select
            var sel = $('<select></select>');
            // 发送ajax请求 /
            $.get('{% url "myhome_gettwoCitys" %}',{'cid':cid},function(data){
                if(data.length>0){
                    var str1='';
                    for(var i=0;i<data.length;i++){
                        str1 += '<option value="'+data[i].id+'">'+data[i].name+'</option>'
                    }
                    console.log(str1);
                    // 讲拼接好的数据 写到select
                    sel.html(str1);
                    // select插入到body中 append appendTo
                    $('body').append(sel);
                }


            })
        })
    </script>
</body>
</html>


 


 







		

		
posted @ 
2018-12-05 15:51 
心做し· 
阅读(482) 
评论(0) 
 
收藏 
举报