烟台网站排名,太原医疗网站建设,昆明网站建设公司_,网站群建设的必要性html与django实现多级数据联动 1、流程
1、进入页面后先获取年级数据 2、选择年级后获取院级数据 3、选择院级后获取层次数据 4、选择层次数据后获取专业数据
2、html代码
p stylemargin-top: 10px;label年级/labelselect id…html与django实现多级数据联动 1、流程
1、进入页面后先获取年级数据 2、选择年级后获取院级数据 3、选择院级后获取层次数据 4、选择层次数据后获取专业数据
2、html代码
p stylemargin-top: 10px;label年级/labelselect idgrade classform-control requiredrequirednamegradestylewidth: 100px; margin-left: 7pxoption idname value--请选择年级--/option/select/pp stylemargin-top: 10px;label院级/labelselect idschool classform-control requiredrequirednameschoolstylewidth: 100px; margin-left: 7pxoption idname value--请选择院级--/option/select/pp stylemargin-top: 10px;label层次/labelselect idlevel classform-control requiredrequirednamelevelstylewidth: 100px; margin-left: 7pxoption idname value--请选择层次--/option/select/pp stylemargin-top: 10px;label专业/labelselect idmajor classform-control requiredrequirednamemajorstylewidth: 100px; margin-left: 7pxoption idname value--请选择专业--/option/select/pjs代码
script typetext/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) {}});}})
/script3、djanog代码
urls.py:
from django.urls import pathfrom textbook import viewsurlpatterns [path(cascade_data/, views.cascade_data, namecascade_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(gradegrade_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(gradegrade_value, schoolschool_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(gradegrade_value, schoolschool_value, levellevel_value).values(major):data.append(course[major])return JsonResponse(data{info: data})# 获取其他数据if code other:details Noneprice Noneremark Nonefor course in Course.objects.filter(gradegrade_value, schoolschool_value, levellevel_value,majormajor_value):details course.detailsprice course.priceremark course.remarkreturn JsonResponse(data{details: details, price: price, remark: remark, })
