citys.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>城市联动</title>
</head>
<body>
<select>
<option>--请选择--</option>
{% for v in data %}
<option value="{{ v.id }}">{{ v.name }}</option>
{% endfor %}
</select>
<script type="text/javascript" src="/static/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
// 第一步 获取 选框,绑定change事件
$('select').live('change',function(){
// 获取当前选中的城市id
var cid = $(this).val()
// 删除当前元素之后的所有同级元素
$(this).nextAll().remove()
// 发送ajax
$.get('{% url 'get_city' %}',{'cid':cid},function(data){
// 判断当前是否还有数据
if(data.length == 0){return;}
// 动态创建 下拉选框
var sel = $('<select></select>')
// 定义选项
var ops = '<option>--请选择--</option>'
// [{},{},{}]
for (var i = 0; i < data.length; i++) {
ops+= '<option value="'+data[i].id+'">'+data[i].name+'</option>'
}
// 把定义的选项设置到下拉框中
sel.html(ops)
// 把创建的html添加到页面中
$('body').append(sel)
},'json')
})
</script>
</body>
</html>
# 城市联动页面
from django.shortcuts import render,redirect
from django.http import HttpResponse,JsonResponse
from django.core.urlresolvers import reverse
from . models import Citys
def citys(request):
# 从数据库中获取所有的一级城市信息
data = Citys.objects.filter(upid=0)
# 分配数据
context = {'data':data}
# 加载模板
return render(request,'citys.html',context)
# 获取 城市信息
def get_city(request):
# 获取请求的参数
cid = request.GET.get('cid')
'''
根据请求的参数,查询对应的城市数据,values()获取出所有对象中的值,
获取出来是个查询集对象,需要强转换成list,
'''
data = list(Citys.objects.filter(upid=cid).values())
# select * from citys where upid=15;
# 返回json数据 {} [{},{}]
return JsonResponse(data,safe=False)
from django.db import models
# 城市数据
class Citys(models.Model):
'''
# id name level upid
1 北京 1 0
2 昌平区 2 1
3 沙河镇 3 2
'''
name = models.CharField(max_length=255)
level = models.IntegerField()
upid = models.IntegerField()
class Meta:
db_table = 'citys'