暑期学习篇之js二级联动
最近做招新网站遇到这个二级联动的问题就记录一下。
<form name="form1" method="post" action="">
<div class="form-group" style="">
<label class="mb-2">学院</label>
<select name="academy" class="form-control" id="academy" onchange="changeSelect(this.selectedIndex)" ></select>
</div>
<div class="form-group">
<label class="mb-2">专业</label>
<select name="major" class="form-control" id="major"></select>
</div>
</form>
<script type="text/javascript">
var arr_academy = ["请选择学院","计算机与信息学院","土木与建筑学院","机械与动力学院","材料与化工学院","电气与新能源学院","经济与管理学院","医学院","文学与传媒学院","法学与公共管理学院","理学院","生物与制药学院","艺术学院","其他"];
var arr_major = [
["请选择专业"],
["计算机科学与技术","物联网工程","数字媒体技术","信息管理与信息系统","数据科学与大数据技术","电子信息科学与技术","其他"],
["土木工程","地质工程","建筑学","城乡规划","其他"],
["机械设计制造及其自动化","材料成型及控制工程","机械电子工程","能源与动力工程","核工程与核技术","工业工程","其他"],
["金属材料工程","新能源材料与器件","化学工程与工艺","其他"],
["电气工程及其自动化","智能电网信息工程","自动化","其他"],
["金融学","国际经济与贸易","工商管理","市场营销","财务管理","人力资源管理","旅游管理","物流管理","其他"],
["临床医学","医学影像学","中医学","药学","护理学","其他"],
["汉语言文学","汉语国际教育","广播电视学","播音与主持艺术","其他"],
["法学","公共事业管理","行政管理","其他"],
["数学与应用数学","信息与计算科学","物理学","光电信息科学与工程","其他"],
["化学","化学生物学","生物科学","生态学","其他"],
["音乐表演","音乐学","舞蹈学","美术学","视觉传达设计","环境设计","其他"],
["其他"]
];
//网页加载完成,初始化菜单
window.onload = init;//传入函数地址
function init(){
//首先获取对象
var academy = document.form1.academy;
var major = document.form1.major;
//指定学院中<option>标记的个数
academy.length = arr_academy.length;
//循环将数组中的数据写入<option>标记中
for(var i=0;i<arr_academy.length;i++){
academy.options[i].text = arr_academy[i];
academy.options[i].value = arr_academy[i];
}
//修改学院列表的默认选择项
var index = 0;
academy.selectedIndex = index;
//指定专业中<option>标记的个数
major.length = arr_major[index].length;
//循环将数组中的数据写入<option>标记中
for (var j = 0; j<arr_major[index].length;j++) {
major.options[j].text = arr_major[index][j];
major.options[j].value = arr_major[index][j];
}
}
function changeSelect(index){
//选择对象
var major = document.form1.major;
//修改学院列表的选择项
academy.selectedIndex = index;
//指定专业中<option>标记的个数
major.length = arr_major[index].length;
//循环将数组中的数据写入<option>标记中
for (var j = 0; j<arr_major[index].length;j++) {
major.options[j].text = arr_major[index][j];
major.options[j].value = arr_major[index][j];
}
}
</script>