Django积木块八——三级联动
三级联动
前端需要的效果,省之后市之后现,创建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>
Django积木块八——三级联动的更多相关文章
- django项目中cxselect三级联动
下载cxselect插件放在static文件夹下 前端引入 <script src="/static/js/jQuery-1.8.2.min.js"></scri ...
- Django积木块六——验证用户是否登录
验证用户是否登录 # 开始在用户登录的时候验证结束后login登录 # request.user.is_authenticated() {% if request.user.is_authentica ...
- Django积木块五——分页
分页 django本身带有分页功能,为什么要用他呢?因为它的代码更为简洁,并且在做筛选的时候会把url中的所有参数都组装起来,并且加上分页.也就是做筛选中的结果也可以用这个分页. pip instal ...
- Django积木块三——静态文件和上传文件
静态文件和上传的文件 # 静态文件 STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), ) # ...
- Django积木块二——邮箱
邮箱 django中自带的功能,因为登录注册都需要邮箱,因此新增了一个小的app--utils用来存放 # email_send.py import random from django.core.m ...
- Django积木块十——全文检索
全文检索 全文检索效率更高,对中文可以进行分词 <!--# 1.安装包--> pip install django-haystack pip install whoosh pip inst ...
- Django积木块九——富文本编辑器
富文本编辑器 前端和后端都可以用富文本编辑器 # pip install django-tinymce # setting 'tinymce' TINYMCE_DEFAULT_CONFIG = { ' ...
- Django积木块七——视频
视频 # 在网上搜索video.js然后下载相关的js和css文件,看文档正确使用视频模块,添加视频外链 <div style="width: 1200px;height: 675px ...
- Django积木块一——验证码
验证码 在github中搜验证码,那个有使用文档 # pip install django-simple-captcha==0.4.6 # setting app captcha # url url( ...
随机推荐
- ES match match_phrase term willcard的查询原理
比如:要求实现SQL中like “%xxxx%”的匹配效果. wildcard通配 这种效果在ES中最匹配的做法是用wildcard query通配,这种情况不会对query分词,而是直接遍历倒排索引 ...
- tensorflow安装和初使用
本文的目的是为了复习并帮助刚开始起步使用机器学习的人员 1.安装准备 为了方便就在window上安装,我的是window10 的笔记本,首先准备python 因为tensorflow在仅仅支持wind ...
- Selenium+TestNG+Maven+Jenkins+SVN(转载)
转载自:https://blog.csdn.net/u014202301/article/details/72354069 一. 创建Maven项目,下载Selenium和TestNG的依赖(依赖可以 ...
- maven工程 添加本地jar依赖
和第三方平台对接的时候要用到对方提供的一个jar包,jar包怎么直接添加到pom文件的依赖中呢? jar包一般都是公共的,要上传到私服仓库.我们都是直接登录私服,操作仓库. 登录私服可以在项目的pom ...
- 网络通信实验(1)STM32F4 以太网简介
STM32F4 以太网简介 STM32F407 芯片自带以太网模块,该模块包括带专用 DMA 控制器的 MAC 802.3(介质访问控制)控制器,支持介质独立接口 (MII) 和简化介质独立接口 (R ...
- TZOJ 5694 区间和II(树状数组区间加区间和)
描述 给定n个整数,有两个操作: (1)给某个区间中的每个数增加一个值: (2)查询某个区间的和. 输入 第一行包括两个正整数n和q(1<=n, q<=100000),分别为序列的长度和操 ...
- C# Task.Run 和 Task.Factory.StartNew 区别
Task.Run 是在 dotnet framework 4.5 之后才可以使用,但是 Task.Factory.StartNew 可以使用比 Task.Run 更多的参数,可以做到更多的定制.可以认 ...
- Scania SDP3 2.38.2.37.0 Download, Install, Activate: Confirmed
Download: Scania Diagnos & Programmer SDP3 2.38.2.37.0 free version and tested version SDP3 2.38 ...
- HDU2034
#include <bits/stdc++.h> using namespace std; int main() { int n,m,val; set<int>::iterat ...
- PHP 利用PHPExcel 文件导入(也可保存到本地或者服务器)、导出
首先需要去官网http://www.php.cn/xiazai/leiku/1491,下载后只需要Classes目录下的文件即可. 1.PHPExcel导出方法实现过程 1 2 3 4 5 6 7 8 ...