html中免费的四级联动,四级联动.html-优快云博客

这段代码展示了如何使用JavaScript实现一个四级联动的下拉选择框，分别包含院系、班级、寝室和学生信息。当用户从上一级选择时，下一级的选项会根据选择动态加载，最终可以定位到具体的学生信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四级联动

请选择

var yardArr = ["信息学院(网络资源系)","网络技术学院(网络技术系)","金融管理学院(财经商贸系)","人文学院(旅游管理系)"];

var class1Arr = [

["软件一班","软件二班","计应一班","计应二班"],

["计网一班","计网二班","数控一班","数控二班"],

["旅管一班","旅管二班","酒管一班","酒管二班"],

["工管一班","工管二班","电商一班","电商二班"]

];

var dormitoryArr = [

[//信息学院

["权限不足，无法访问此班级"],

["权限不足，无法查询此班级"],

["616","617","618","619","622","624","701"],

["705","706","707","708","709"]

[//网络技术学院

["权限不足，无法访问此班级"],

["权限不足，无法访问此班级"]

[//经济管理学院

["权限不足，无法访问此班级"],

["权限不足，无法访问此班级"]

[//人文学院

["权限不足，无法访问此班级"],

["权限不足，无法访问此班级"]

]

];

var studentArr = [

[

[//软件一班

["无"],

["无"]

[//软件二班

["无"],

["无"]

[//计应一班

["王哲","毛智颖","谢志强","彭先哲"],

["陈龙","陈昕宇","吴晓健","王特博"],

["罗江","伍冬明","谢瑞杰","黄仙明"],

["刘洵", "张博" , "王光" ,"熊中意"],

["唐棋", "黄沛" , "胡界" ,"张海涛"],

["李涛涛","唐捷","易哲凌","宁吉成"],

["肖湘杰","洪龙","凌振雄","李夏杨"]

]

];

//定义一个导入数据函数

function createOption(obj,data){//obj option对象 data数据

for(var i in data){

var opt = new Option(data[i],i);//通过遍历数组的下标将数组元素添加至option

obj.options.add(opt);

}

//获取对象

//导入院的数据

var yard = document.getElementById('yard');

createOption(yard,yardArr);//将院数据添加到Option对象

//导入班级的数据

var class1 = document.getElementById('class1');

yard.onchange = function(){

class1.options.length = 0;//清空class1下的原option

createOption(class1,class1Arr[yard.value]);//通过点击院后选择的数据来获取班级对应的下标

if(yard.value>=0){

class1.onchange();//当用户没有选择默认选项，则将班级数据填充到select

}else{

class1.options.length = 0;//如果用户点击默认选项，则清空班级的下拉数据

dormitory.options.length = 0;//如果用户点击默认选项，则清空寝室的下拉数据

student.options.length = 0;//如果用户点击默认选项，则清空人的下拉数据

}

};

//导入寝室的数据

var dormitory = document.getElementById('dormitory');

class1.onchange = function(){

dormitory.options.length = 0;//防止寝室下标依旧为0的情况

createOption(dormitory,dormitoryArr[yard.value][class1.value]);//通过点击班级后选择的数据来获取寝室对应的下标

};

//导入学生的数据

var student = document.getElementById('student');

dormitory.onchange = function(){

student.options.length = 0;//防止学生下标依旧为0的情况

createOption(student,studentArr[yard.value][class1.value][dormitory.value]);//通过点击寝室后选择的数据来获取学生对应的下标

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史