二级联动——学院、专业

根据不同学院来选择不同的专业

html部分
select标签的onchange属性

<div class="form-group form-inline" style="width: 600px;">
	<label for="campus">学院</label>
	<select class="form-control" onchange="changeCollege(this.value)" id="college">
		<option value=''>----请-选-择-学-院----</option>
		<option value="0">数据科学与软件工程学院</option>
		<option value="1">学院2</option>
		<option value="2">学院3</option>
		<option value="3">学院4</option>
	</select>
	<label for="campus">专业</label>
	<select class="form-control" id="major">
		
	</select>
</div>

js部分

<script type="text/javascript">
	//定义一个二维数组，存储专业信息
	var colleges = new Array();
	colleges[0]=new Array("专业1","专业2","专业3");
	colleges[1]=new Array("专业4","专业5","专业6");
	colleges[2]=new Array("专业7","专业8","专业9");
	colleges[3]=new Array("专业10","专业11","专业12");
	function changeCollege(index){
		var arr = colleges[index];
		var m = $("#major");
		m.html("<option value=''>----请-选-择-专-业----</option>");
		//遍历数组
		$(arr).each(function(){
			var temp = "<option>"+this+"</option>"
			//追加
			m.append(temp);
		})
	}
</script>

获取select下拉框中选中option中文本内容

var c = document.getElementById("college");//获取下拉框对象
var cOptions = c.options;//获取所有option选项
var cIndex = c.selectedIndex;//获取当前选中的下标
var college = cOptions[cIndex].text;
console.log(college);