<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<form action="">
<select name="" id="xuexiao">
<option value="-1">请选择</option>
</select>
<select name="" id="yuanxi"></select>
<select name="" id="zhuanye"></select>
</form>
<script>
var xuexiaoArr=['四川工商职业技术学院','四川大学','西南交通大学'];
var yuanxiArr=[
[['信息工程系'],['轻工工程系'],['设计艺术系'],['经济管理系'],['机电工程系']],
[['水利电力学院']],
[['轨道交通学院'],['土木工程学院']]
];
var zhuanyeArr=[
[['软件技术专业','大数据专业','网络技术专业','电子商务专业'],['印刷技术'],['园艺设计'],['会计'],['机械自动化']],
[['软件工程'],['幼儿教育']],
[['轨道交通'],['生物和技术','机械数字化']]
];
function createOption(obj,data){
for(var i in data){
var op=new Option(data[i],i);
obj.options.add(op);
}
}
var xuexiao=document.querySelector('#xuexiao');
createOption(xuexiao,xuexiaoArr);
var yuanxi=document.querySelector('#yuanxi');
xuexiao.onchange=()=>{
yuanxi.options.length=0;
createOption(yuanxi,yuanxiArr[xuexiao.value]);
if(xuexiao.value>=0){
yuanxi.onchange();
}else{
zhuanye.options.length=0;
}
}
var zhuanye=document.querySelector('#zhuanye');
yuanxi.onchange=()=>{
zhuanye.options.length=0;
createOption(zhuanye,zhuanyeArr[xuexiao.value][yuanxi.value]);
}
console.log(xuexiao.value)
</script>
</body>
</html>
写的很水,参考看看就行,不喜勿喷!!!