CSS——初做网页的小心得--下拉框联动

       学习做前端用了半年的时间，学完之后，并没有真正的去用它，也不知道怎么去使用这些技术。半年后，一个偶然的机会，我们社团要做一个小官网，也是学生自己搞的，起初很兴奋，也很担心自己的技术只是皮毛，但是还是同意了。果然在制作的时候遇到很多障碍，下拉框之间的联动效果。

       下拉框的联动效果是为了实现学院与专业之间的连接，当选择学院的时候，专业的下拉框也要进行变化。事先把每一个院的专业放在数组里面，再对学院下拉框设置一个监听，学院的下拉框的内容，如果变化，就将专业的下拉框改变成当前学院下的相关专业。这是我最终解决的方案。

       中间解决时将学院的下拉框中option的value值与option的内容设置为一样，一直困扰我的一个小细节问题就与此有关。当我进行判断时忽略掉是学院select的内容与它的子标签option的内容进行比较，如果是该学院，就将专业下拉框的内容更改。

代码解决：

<span>学　　院 ：</span>
<select  id="academy" >
		<option class="op" value="电气与计算机学院">电气与计算机学院</option>
		<option class="op" value="材料科学与工程学院">材料科学与工程学院</option>
		<option class="op"  value="测绘与勘察工程学院">测绘与勘察工程学院</option>
		<option  class="op" value="管理学院">管理学院</option>
		<option  class="op"  value="建筑与规划学院">建筑与规划学院</option>
		<option  class="op" value="交通科学与工程学院">交通科学与工程学院</option>
		<option  class="op" value="市政与环境工程学院">市政与环境工程学院</option>
		<option  class="op" value="书法学院">书法学院</option>
		<option  class="op" value="土木工程学院">土木工程学院</option>
		<option  class="op" value="研究生学院">研究生学院</option>
		<option  class="op"  value="艺术设计学院">艺术设计学院</option>
</select>
<span>专　　业 ：</span>
<select class="active" id="major">
		<option>电气工程及其自动化</option>
		<option>电子信息工程</option>
		<option>电子信息科学</option>
		<option>计算机</option>
		<option>建筑电气与智能化</option>
		<option>软件工程</option>
		<option>网络工程</option>
		<option>自动化</option>
</select>

js处理：

function selectSwitch(){
	//获取对象
	var oLi = document.getElementsByClassName("op");
	var oD =  document.getElementById('major');
	var oQ =  document.getElementById('academy');
	// 先用数组将月份事件活动保存到数组里
	var arr = [
		"<option>电气工程及其自动化</option><option>电子信息工程</option><option>电子信息科学</option><option>计算机</option><option>建筑电气与智能化</option><option>软件工程</option><option>网络工程</option><option>自动化</option>"
		,
		"<option>材料化学</option><option>高分子材料工程</option><option>无机非金属材料工程</option>"
		,
		"<option>测绘工程</option><option>地理信息系统</option><option>地质工程</option><option>地质类</option><option>勘查技术与工程</option>"
		,
		"<option>财务管理</option><option>城市管理</option><option>房地产开发与管理</option><option>信息管理与信息系统</option><option>工程管理</option><option>工程管理合作</option><option>工程造价</option><option>物流管理</option><option>工商管理</option><option>工商管理类</option><option>公共事业管理</option><option>管理科学与工程类</option><option>社会工作</option>"
		,
		"<option>规划</option><option>建筑学</option><option>建筑学合作</option>"
		,
		"<option>道路桥梁与渡河工程</option><option>道路桥梁与渡河工程（道路工程方向）</option><option>道路桥梁与渡河工程（桥隧工程方向）</option><option>交通工程</option>"
		,
		"<option>安全工程</option><option>给排水科学与工程</option><option>环境工程</option><option>环境科学</option><option>建筑环境与能源应用工程</option><option>建筑环境与能源应用工程燃气工程方向</option>"
		,
		"<option>书法学</option>"
		,
		"<option>城市地下空间工程</option><option>工程力学</option><option>机械工程及自动化</option><option>土木工程</option><option>土木工程对口</option><option>土木工程合作</option><option>土木工程专</option>"
		,
		"<option>研究生</option>"
		,
		"<option>风景园林</option><option>环境设计</option><option>环境设计环境陈设设计方向</option><option>环境设计专</option><option>美术学</option><option>视觉传达设计</option>"
	];
	//添加鼠标移入和鼠标移除事件
	for(var i = 0;i <11;i++){
		
//		oLi[i].index = i;//记录索引值

		oQ.onchange = function(e){
			for(var j = 0; j < 11;j++){
				oD.innerHTML = "";
			}
			for(var j = 0; j < 11;j++){
				if(oQ.value == this.children[j].innerText){
					oD.innerHTML = arr[j];
				}
			}
		};
	}
}

虽然代码还有点稚嫩，但继续前行！！！