view.py :
#城市联动
def citys(request):
#从数据库中获取所有的一级城市
data=models.Citys.objects.filter(upid=0)
print(data)
print('-------------')
#分配数据
context={'data':data}
print(context)
return render(request,'home/citys.html',context)
def get_city(request):
cid = request.GET.get('cid')
data = list(models.Citys.objects.filter(upid = cid).values())
return JsonResponse(data,safe=False)
citys.html：
<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()
// bug修复2
$(this).nextAll().remove()
//发送Ajax
$.get('{% url 'get_city' %}',{'cid':cid},function(data){
// bug修复1
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)
$('body').append(sel)
},'json')
})
</script>
</body>