背景
前台页面两个select框，一个与学院关联，另一个与专业关联，现需要选择学院select框后，显示学院相关信息，且专业select下面仅有属于该学院的专业名称。也就是实现一个二级联动效果。
两个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对象创建ajax }catch(e){ xmlhttp = false; } // try end }else{ //chrome、firefox等非ie内核 try{ xmlhttp = new xmlhttprequest(); //视为非ie情况下 }catch(e){ xmlhttp = false; // 其他非主流浏览器 } } // 判断结束,如果创建成功则返回一个dom对象,如果创建不成功则返回一个false if(xmlhttp) { return xmlhttp; }else{ alert("对象创建失败,请检查浏览器是否支持xmlhttprequest!"); } } // 函数体 //学院下拉框事件 function showcollegeinfo(){ var selectindex = document.getelementbyid("college").selectedindex;//获得是第几个被选中了 var value = document.getelementbyid("college").options[selectindex].value; if(value) { // 先创建一个对象实例 createxmlhttprequestobject(); // 使用事件对象获取文本框id的值 var vcollege = value; var url = "college.php?xy=" vcollege; //待发送url url=encodeuri(url); xmlhttp.onreadystatechange=ajaxok; // 判断浏览器状态栏 (接收玩数据触发的事件) xmlhttp.open("get",url,false); // get向服务器端发送数据 xmlhttp.send(null); document.getelementbyid("collegeinfo").style.display="block";//显示学院信息的p }else{ document.getelementbyid("collegeinfo").style.display="none";//隐藏学院信息的p } } function ajaxok() { if(xmlhttp.readystate == 4 && xmlhttp.status==200) { document.getelementbyid("collegeinfo").innerhtml = xmlhttp.responsetext; } } //专业下拉框事件 function showmajorinfo(){ var selectindex = document.getelementbyid("major").selectedindex;//获得是第几个被选中了 var value = document.getelementbyid("major").options[selectindex].value; if(value) { // 先创建一个对象实例 createxmlhttprequestobject(); // 使用事件对象获取文本框id的值 var vmajor = value; var url = "major.php?zy=" vmajor; //待发送url url=encodeuri(url); xmlhttp.onreadystatechange=ajaxok2; // 判断浏览器状态栏 (接收玩数据触发的事件) xmlhttp.open("get",url,false); // get向服务器端发送数据 xmlhttp.send(null); document.getelementbyid("majorinfo").style.display="block";//显示专业信息的p }else{ document.getelementbyid("majorinfo").style.display="none";//隐藏专业信息的p } } function ajaxok2() { if(xmlhttp.readystate == 4 && xmlhttp.status==200) { document.getelementbyid("majorinfo").innerhtml = xmlhttp.responsetext; } } </script>相关学习推荐：php编程从入门到精通