背景
前臺頁面兩個select框，一個與學(xué)院關(guān)聯(lián)，另一個與專業(yè)關(guān)聯(lián)，現(xiàn)需要選擇學(xué)院select框后，顯示學(xué)院相關(guān)信息，且專業(yè)select下面僅有屬于該學(xué)院的專業(yè)名稱。也就是實現(xiàn)一個二級聯(lián)動效果。
兩個select里面分別定義onchange事件，事件中利用ajax的get方法向后臺php遞交信息，再將查詢得到的信息echo出來或document.write。
注：代碼參考了有位叫y0umer的博主寫的。
代碼如下:
<script type="text/javascript"> var xmlhttp; function createxmlhttprequestobject(){ if(window.activexobject){ // 判斷是否是ie瀏覽器 try { // try開始 xmlhttp = new activexobject("microsoft.xmlhttp"); // 使用activex對象創(chuàng)建ajax }catch(e){ xmlhttp = false; } // try end }else{ //chrome、firefox等非ie內(nèi)核 try{ xmlhttp = new xmlhttprequest(); //視為非ie情況下 }catch(e){ xmlhttp = false; // 其他非主流瀏覽器 } } // 判斷結(jié)束,如果創(chuàng)建成功則返回一個dom對象,如果創(chuàng)建不成功則返回一個false if(xmlhttp) { return xmlhttp; }else{ alert("對象創(chuàng)建失敗,請檢查瀏覽器是否支持xmlhttprequest!"); } } // 函數(shù)體 //學(xué)院下拉框事件 function showcollegeinfo(){ var selectindex = document.getelementbyid("college").selectedindex;//獲得是第幾個被選中了 var value = document.getelementbyid("college").options[selectindex].value; if(value) { // 先創(chuàng)建一個對象實例 createxmlhttprequestobject(); // 使用事件對象獲取文本框id的值 var vcollege = value; var url = "college.php?xy=" vcollege; //待發(fā)送url url=encodeuri(url); xmlhttp.onreadystatechange=ajaxok; // 判斷瀏覽器狀態(tài)欄 (接收玩數(shù)據(jù)觸發(fā)的事件) xmlhttp.open("get",url,false); // get向服務(wù)器端發(fā)送數(shù)據(jù) xmlhttp.send(null); document.getelementbyid("collegeinfo").style.display="block";//顯示學(xué)院信息的p }else{ document.getelementbyid("collegeinfo").style.display="none";//隱藏學(xué)院信息的p } } function ajaxok() { if(xmlhttp.readystate == 4 && xmlhttp.status==200) { document.getelementbyid("collegeinfo").innerhtml = xmlhttp.responsetext; } } //專業(yè)下拉框事件 function showmajorinfo(){ var selectindex = document.getelementbyid("major").selectedindex;//獲得是第幾個被選中了 var value = document.getelementbyid("major").options[selectindex].value; if(value) { // 先創(chuàng)建一個對象實例 createxmlhttprequestobject(); // 使用事件對象獲取文本框id的值 var vmajor = value; var url = "major.php?zy=" vmajor; //待發(fā)送url url=encodeuri(url); xmlhttp.onreadystatechange=ajaxok2; // 判斷瀏覽器狀態(tài)欄 (接收玩數(shù)據(jù)觸發(fā)的事件) xmlhttp.open("get",url,false); // get向服務(wù)器端發(fā)送數(shù)據(jù) xmlhttp.send(null); document.getelementbyid("majorinfo").style.display="block";//顯示專業(yè)信息的p }else{ document.getelementbyid("majorinfo").style.display="none";//隱藏專業(yè)信息的p } } function ajaxok2() { if(xmlhttp.readystate == 4 && xmlhttp.status==200) { document.getelementbyid("majorinfo").innerhtml = xmlhttp.responsetext; } } </script>相關(guān)學(xué)習(xí)推薦：php編程從入門到精通