學習做前端用了半年的時間，學完之後，並沒有真正的去用它，也不知道怎麼去使用這些技術。半年後，一個偶然的機會，我們社團要做一個小官網，也是學生自己搞的，起初很興奮，也很擔心自己的技術只是皮毛，但是還是同意了。果然在製作的時候遇到很多障礙，下拉框之間的聯動效果。

       下拉框的聯動效果是為了實現學院與專業之間的連線，當選擇學院的時候，專業的下拉框也要進行變化。事先把每一個院的專業放在數組裡面，再對學院下拉框設定一個監聽，學院的下拉框的內容，如果變化，就將專業的下拉框改變成當前學院下的相關專業。這是我最終解決的方案。

       中間解決時將學院的下拉框中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];
				}
			}
		};
	}
}
 

雖然程式碼還有點稚嫩，但繼續前行！！！