html与django实现多级数据联动

html与django实现多级数据联动

在这里插入图片描述

1、流程

1、进入页面后先获取年级数据
2、选择年级后获取院级数据
3、选择院级后获取层次数据
4、选择层次数据后获取专业数据

2、html代码

<p style="margin-top: 10px;"><label>年级</label><select id="grade" class="form-control" required="required"name="grade"style="width: 100px; margin-left: 7px"><option id="name" value="">--请选择年级--</option></select></p><p style="margin-top: 10px;"><label>院级</label><select id="school" class="form-control" required="required"name="school"style="width: 100px; margin-left: 7px"><option id="name" value="">--请选择院级--</option></select></p><p style="margin-top: 10px;"><label>层次</label><select id="level" class="form-control" required="required"name="level"style="width: 100px; margin-left: 7px"><option id="name" value="">--请选择层次--</option></select></p><p style="margin-top: 10px;"><label>专业</label><select id="major" class="form-control" required="required"name="major"style="width: 100px; margin-left: 7px"><option id="name" value="">--请选择专业--</option></select></p>

js代码:

<script type="text/javascript">$(document).ready(function () {// 第一层 年级$.ajax({url: '{{ cascade_data }}',type: 'POST',data: {code: 'grade'},success: function (res) {var data = res['info'];for (var i = 0; i < data.length; i++) {$('#grade').append("<option value='" + data[i] + "'>" + data[i] + "</option>")}},error: function (err) {}});// 第二层 院级document.getElementById('grade').onchange = function () {$.ajax({url: '{{ cascade_data }}',type: 'POST',data: {code: 'school',grade_value: this.value,},success: function (res) {var data = res['info'];for (var i = 0; i < data.length; i++) {$('#school').append("<option value='" + data[i] + "'>" + data[i] + "</option>")}},error: function (err) {}});}// 第三层 层次document.getElementById('school').onchange = function () {$.ajax({url: '{{ cascade_data }}',type: 'POST',data: {code: 'level',grade_value: document.getElementById('grade').value,school_value: this.value,},success: function (res) {var data = res['info'];for (var i = 0; i < data.length; i++) {$('#level').append("<option value='" + data[i] + "'>" + data[i] + "</option>")}},error: function (err) {}});}// 第四层 专业document.getElementById('level').onchange = function () {$.ajax({url: '{{ cascade_data }}',type: 'POST',data: {code: 'major',grade_value: document.getElementById('grade').value,school_value: document.getElementById('school').value,level_value: this.value,},success: function (res) {var data = res['info'];for (var i = 0; i < data.length; i++) {$('#major').append("<option value='" + data[i] + "'>" + data[i] + "</option>")}},error: function (err) {}});}// 第五层document.getElementById('major').onchange = function () {$.ajax({url: '{{ cascade_data }}',type: 'POST',data: {code: 'other',grade_value: document.getElementById('grade').value,school_value: document.getElementById('school').value,level_value: document.getElementById('level').value,major_value: this.value,},success: function (res) {document.getElementById('price').value = res['price']document.getElementById('details').value = res['details']document.getElementById('remark').value = res['remark']},error: function (err) {}});}})
</script>

3、djanog代码

urls.py:

from django.urls import pathfrom textbook import viewsurlpatterns = [path("cascade_data/", views.cascade_data, name="cascade_data"),  # 教材级联数据
]

views.py代码:

def cascade_data(request, *args, **kwargs):# 获取级联数据code = request.POST.get('code', '')grade_value = request.POST.get('grade_value', '')school_value = request.POST.get('school_value', '')level_value = request.POST.get('level_value', '')major_value = request.POST.get('major_value', '')# 获取院级数据if code == 'grade':data = []for course in Course.objects.all().values('grade'):if course['grade'] not in data:data.append(course['grade'])return JsonResponse(data={'info': data})# 获取年级数据if code == 'school':data = []for course in Course.objects.filter(grade=grade_value).values('school'):if course['school'] not in data:data.append(course['school'])return JsonResponse(data={'info': data})# 获取层级数据if code == 'level':data = []for course in Course.objects.filter(grade=grade_value, school=school_value).values('level'):if course['level'] not in data:data.append(course['level'])return JsonResponse(data={'info': data})# 获取专业数据if code == 'major':data = []for course in Course.objects.filter(grade=grade_value, school=school_value, level=level_value).values('major'):data.append(course['major'])return JsonResponse(data={'info': data})# 获取其他数据if code == 'other':details = Noneprice = Noneremark = Nonefor course in Course.objects.filter(grade=grade_value, school=school_value, level=level_value,major=major_value):details = course.detailsprice = course.priceremark = course.remarkreturn JsonResponse(data={'details': details, 'price': price, 'remark': remark, })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/187442.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

认识计算机-JavaEE初阶

文章目录 一、计算机的发展史二、冯诺依曼体系&#xff08;Von Neumann Architecture&#xff09;三、CPU基本工作流程3.1 算术逻辑单元&#xff08;ALU&#xff09;3.2 寄存器&#xff08;Register)和内存&#xff08;RAM&#xff09;3.3 控制单元&#xff08;CU&#xff09;3…

深入理解 TCP;场景复现,掌握鲜为人知的细节

握手失败 第一次握手丢失了&#xff0c;会发生什么&#xff1f; 当客户端想和服务端建立 TCP 连接的时候&#xff0c;首先第一个发的就是 SYN 报文&#xff0c;然后进入到 SYN_SENT 状态。 在这之后&#xff0c;如果客户端迟迟收不到服务端的 SYN-ACK 报文&#xff08;第二次…

Apache Airflow (四) :Airflow 调度shell命令

&#x1f3e1; 个人主页&#xff1a;IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 &#x1f6a9; 私聊博主&#xff1a;加入大数据技术讨论群聊&#xff0c;获取更多大数据资料。 &#x1f514; 博主个人B栈地址&#xff1a;豹哥教你大数据的个人空间-豹…

Delphi 12 重返雅典 (RAD Studio 12)

RAD Studio 12 的新功能&#xff1a; 以最新的平台版本为目标&#xff01; RAD Studio 12 提供对 iOS 17&#xff08;仅适用于 Delphi&#xff09;、Android 14 和 macOS Sonoma 的官方支持。RAD Studio 12 还支持 Ubuntu 22 LTS 和 Windows Server 2022。 Delphi 源代码的多…

<蓝桥杯软件赛>零基础备赛20周--第5周--杂题-2

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周&#xff08;读者可以按…

一题三解(暴力、二分查找算法、单指针):鸡蛋掉落

涉及知识点 暴力、二分查找算法、单指针 题目 给你 k 枚相同的鸡蛋&#xff0c;并可以使用一栋从第 1 层到第 n 层共有 n 层楼的建筑。 已知存在楼层 f &#xff0c;满足 0 < f < n &#xff0c;任何从 高于 f 的楼层落下的鸡蛋都会碎&#xff0c;从 f 楼层或比它低的…

3DMAX汽车绑定动画模拟插件MadCar疯狂汽车使用教程

3DMAX汽车绑定动画模拟插件MadCar疯狂的汽车&#xff0c;用于通过模拟控制来快速装配轮式车辆及其动画。这个新版本允许装配任何数量的车轮的车辆&#xff0c;以及包括摩托车在内的任何相互布置。还支持任意数量的拖车。 每个车轮和悬架都有简化的行为设置以及微调&#xff0c…

【微服务专题】手写模拟SpringBoot

目录 前言阅读对象阅读导航前置知识笔记正文一、工程项目准备1.1 新建项目1.1 pom.xml1.2 业务模拟 二、模拟SpringBoot启动&#xff1a;好戏开场2.1 启动配置类2.1.1 shen-base-springboot新增2.1.2 shen-example客户端新增启动类 三、run方法的实现3.1 步骤一&#xff1a;启动…

RAW图像处理软件Capture One 23 Enterprise mac中文版功能特点

Capture One 23 Enterprise mac是一款专业的图像处理软件&#xff0c;旨在为企业用户提供高效、快速和灵活的工作流程。 Capture One 23 Enterprise mac软件的特点和功能 强大的图像编辑工具&#xff1a;Capture One 23 Enterprise提供了一系列强大的图像编辑工具&#xff0c;…

TensorFlow学习笔记--(1)张量的随机生成

张量的生成 如何判断一个张量的维数&#xff1a;看张量的中括号有几层 0 1 2 &#xff1a;零维数列 [2 4 6] : 一维向量 [ [1 2 3] [4 5 6] ] : 二维数组 两行三列 第一行数据为 1 2 3 第二行数据为 4 5 6 以此类推 n维张量有n层中括号 tf.zeros(%指定一个张量的维数%) 生成一…

Django如何创建表关系,Django的请求声明周期流程图

【1】表与表之间的关系 一对一 左表的一条记录对应右表的一条记录&#xff0c;反之亦然 多对一 左表的一条记录对应右表的多条记录&#xff0c;反之不成立 多对多 左表的一条记录对应右表的多表记录&#xff0c;反之成立 【2】django中创建表关系 class Book(models.Model):t…

canvas 曲线图 双数值轴 山峰图

下面的代码本人亲自撰写&#xff0c;原生不易啊。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>D…

CSS3 用户界面、图片、按钮

一、CSS3用户界面&#xff1a; 在CSS3中&#xff0c;增加了一些新的用户界面特性来调整元素尺寸、框尺寸和外边框。CSS3用户界面属性&#xff1a;resize、box-sizing、outline-offset。 1、resize&#xff1a; resize属性指定一个元素是否应该由用户去调整大小。 <style…

Azure 机器学习 - 有关为 Azure 机器学习配置 Kubernetes 群集的参考

目录 受支持的 Kubernetes 版本和区域建议的资源计划ARO 或 OCP 群集的先决条件禁用安全增强型 Linux (SELinux)ARO 和 OCP 的特权设置 收集的日志详细信息Azure 机器学习作业与自定义数据存储连接支持的 Azure 机器学习排斥和容许最佳实践 通过 HTTP 或 HTTPS 将其他入口控制器…

DAY50 309.最佳买卖股票时机含冷冻期 + 714.买卖股票的最佳时机含手续费

309.最佳买卖股票时机含冷冻期 题目要求&#xff1a;给定一个整数数组&#xff0c;其中第 i 个元素代表了第 i 天的股票价格 。 设计一个算法计算出最大利润。在满足以下约束条件下&#xff0c;你可以尽可能地完成更多的交易&#xff08;多次买卖一支股票&#xff09;: 你不…

vue2+elementui使用MessageBox 弹框$msgbox自定义VNode内容:实现radio

虽说实现下面的效果&#xff0c;用el-dialog很轻松就能搞定。但是这种简单的交互&#xff0c;我更喜欢使用MessageBox。 话不多说&#xff0c;直接上代码~ <el-button type"primary" size"mini" click"handleApply()" >处理申请</el-b…

【Git】Git图形化工具SSH协议IDEA集成Git的使用讲解

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Git》。&#x1f3af;&#x1f3af; &#x1f449…

git命令之遭遇 ignore罕见问题解决

我先来讲讲背景 我的一些文件在ignore了&#xff0c;不会被提交到远程仓库&#xff0c;这时候我的远程仓库中是没有这几个文件的&#xff0c;这时候我如果使用 git reset 的话这时候除了那几个 ignore 的文件以外都被更新的&#xff0c;但是如果我不需要这几个被 ignore 的文件…

蓝桥杯之模拟与枚举day1

Question1卡片(C/CA组第一题) 这个是一道简单的模拟枚举题目&#xff0c;只要把对应每次的i的各个位都提取出来&#xff0c;然后对应的卡片数目减去1即可。属于打卡题目。注意for循环的特殊使用即可 #include <iostream> using namespace std; bool solve(int a[],int n…

NSS [鹏城杯 2022]压缩包

NSS [鹏城杯 2022]压缩包 考点&#xff1a;条件竞争/逻辑漏洞&#xff08;解压失败不删除已经解压文件&#xff09; 参考&#xff1a;回忆phpcms头像上传漏洞以及后续影响 | 离别歌 (leavesongs.com) 源码有点小多 <?php highlight_file(__FILE__);function removedir($…