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(" + data[i] + "")
}
},
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(" + data[i] + "")
}
},
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(" + data[i] + "")
}
},
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(" + data[i] + "")
}
},
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 path
from textbook import views
urlpatterns = [
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 = None
price = None
remark = None
for course in Course.objects.filter(grade=grade_value, school=school_value, level=level_value,
major=major_value):
details = course.details
price = course.price
remark = course.remark
return JsonResponse(data={'details': details, 'price': price, 'remark': remark, })