学习做前端用了半年的时间,学完之后,并没有真正的去用它,也不知道怎么去使用这些技术。半年后,一个偶然的机会,我们社团要做一个小官网,也是学生自己搞的,起初很兴奋,也很担心自己的技术只是皮毛,但是还是同意了。果然在制作的时候遇到很多障碍,下拉框之间的联动效果。
下拉框的联动效果是为了实现学院与专业之间的连接,当选择学院的时候,专业的下拉框也要进行变化。事先把每一个院的专业放在数组里面,再对学院下拉框设置一个监听,学院的下拉框的内容,如果变化,就将专业的下拉框改变成当前学院下的相关专业。这是我最终解决的方案。
中间解决时将学院的下拉框中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];
}
}
};
}
}
虽然代码还有点稚嫩,但继续前行!!!