小结

页面的路由

页面的视图

模板页样式

数据库里的内容

内容都是随机出来的

省份的外键值为空

其它情况一样

核对一下模型类

class City(models.Model):name = models.CharField(verbose_name="地名", max_length=20)pid = models.ForeignKey("self", on_delete=models.CASCADE, default=None, null=True)

—开始—

页面载入后要先有省级的内容

》发一个ajax请求，拿省级的内容

》路由

》视图

# 查询全部省份
def province(request):all_province = models.City.objects.filter(pid__isnull=True)province_info_list = [(province.id, province.name) for province in all_province]return  JsonResponse(province_info_list)

让jquery生效

》先完成基本功能，让jquery生效

<!doctype html>
<html lang="en">
<head>{% load static %}<meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>test_linkage</title><script src="{% get_static_prefix %}js/jquery-1.12.4.min.js"></script><script>$(main);function main() {alert(111);}</script></head>
<body><select name="province" id=""><option value="">--省份--</option>
</select><select name="city" id=""><option value="">--城市--</option>
</select><select name="area" id=""><option value="">--区域--</option>
</select></body>
</html>

能够弹出东西，就OK

发起ajax请求

省份下拉框变化

》要发起一个请求

配一个城市的路由

视图获到的全部市

收到城市列表后处理

django-多级联动-前端效果相关推荐

多级联动下拉java,下拉列表多级联动前端实现
一获取一级分类 1 组件数据定义添加在Info.vue的data中 subjectList: [], // 一级分类 subjectLevelTwoList: [] // 二级分类 2 组件脚本 ...
多级联动下拉菜单插件：jquery.cxselect.js
话说这个插件,我也用了挺久了,但一直对其具体的作用不是很懂,只知道可以利用 ajax来请求数据,实现类似于多级联动的效果.后来百度了下,在此做个总结吧. 下面是以一名php程序员的角度来分析的...可 ...
excel图表交互联动_如何使用高大上的多级联动交互式图表来分析人员结构？
关注[新精英充电站]能力提升看得见! 众所周知,Excel中的图表是分析数据最重要一枚利器.但一般我们分析数据时使用的图表都是静态的,一个图表只能展示一个数据维度的情况,如果需要展示的数据有多个维度, ...
DOM 案例——(美团外卖下拉框菜单、半透明——信息滑入、模态窗口拖拽效果、放大镜效果、滚动条滑到一定位置的固定导航栏、12306购票网站多级联动、斗鱼TV无规则弹幕特效、百度搜索条动态输入下拉瀑布)
目录 1.缓动动画--美团外卖下拉框菜单 2.半透明--信息滑入 3.模态窗口拖拽效果 4.放大镜效果 5.滚动条滑到一定位置的固定导航栏 6.12306购票网站多级联动 7.斗鱼TV无规则弹幕特效 ...
vue实现三级联动，多级联动
vue做项目的时候,遇到了要实现多级联动的需求,由于只是小功能,就没有引入插件,自己实现了一下. 需求: 需要统计用户购买的3C产品的信息,如下图需求评审的时候确定了让前端存储维护产品信息,所以下面 ...
mysql vue 菜谱_vue+ java 实现多级菜单递归效果
效果如图: 大概思路:树形视图使用的是vue官方事例代码,java负责封装数据,按照vue官方事例的数据结构封装数据即可.有两个需要关注的点: 1.官方事例的数据结构是一个对象里面包含着集合,而不是一 ...
JS实现的五级联动菜单效果完整实例
https://www.jb51.net/article/106525.htm 本文实例讲述了JS实现的五级联动菜单效果.分享给大家供大家参考,具体如下: js实现多级联动的方法很多,这里给出一种5级 ...
java递归实现多级菜单栏_vue+ java 实现多级菜单递归效果
效果如图: 大概思路:树形视图使用的是vue官方事例代码,java负责封装数据,按照vue官方事例的数据结构封装数据即可.有两个需要关注的点: 1.官方事例的数据结构是一个对象里面包含着集合,而不是一 ...
ajax实现多级联动菜单,jquery 实现二级/三级/多级联动菜单的思路及代码
本文介绍使用jquery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级.三级或多级联动也可以按照此方法完成. 文章中涉及到的数据表为City,为方便管理. 设计此表如下 ID:自增 ...

django-多级联动-前端效果

小结

页面的路由

页面的视图

模板页样式

数据库里的内容

核对一下模型类

—开始—

页面载入后要先有省级的内容

让jquery生效

发起ajax请求

省份下拉框变化

配一个城市的路由

视图获到的全部市

收到城市列表后处理

django-多级联动-前端效果相关推荐

最新文章

热门文章