暑期学习篇之js二级联动

暑期学习篇之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>