html与django实现多级数据联动

html与django实现多级数据联动

1、流程

1、进入页面后先获取年级数据

2、选择年级后获取院级数据

3、选择院级后获取层次数据

4、选择层次数据后获取专业数据

2、html代码

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代码:

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:

python 复制代码
from django.urls import path

from textbook import views

urlpatterns = [
    
    path("cascade_data/", views.cascade_data, name="cascade_data"),  # 教材级联数据
]

views.py代码:

python 复制代码
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, })
相关推荐
小宁爱Python22 分钟前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
哆啦A梦15881 小时前
36 注册
前端·javascript·html
2501_916007471 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
zh_xuan2 小时前
android 利用反射和注解绑定控件id和点击事件
android·注解·反射·控件绑定
杨超越luckly3 小时前
HTML应用指南:利用GET请求获取全国沃尔沃门店位置信息
前端·arcgis·html·数据可视化·门店数据
这个杀手不太累4 小时前
Android ProcessLifecycleOwner
android·lifecycle
SRC_BLUE_175 小时前
NSSCTF - Web | 【第五空间 2021】pklovecloud
android·前端
tq10867 小时前
学习Hilt注解
android
软件技术NINI7 小时前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
2501_915921437 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone