<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">最近在帮学校做一个小功能，主要是选择学院，再选择班级，最后选择学生，即ajax三级联动功能。所以最近两天</span>
就抽空学习了一下。因为主要是学校内部使用，ie6已经淘汰了，所以就做的很水，主要是实现基本功能而已。
废话不多说了，直接上效果图：
代码附上：
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>三级浮动</title> <script src="ajax.js" type="text/javascript"></script> </head> <body onload="display_college()"> <label for="college">学院：</label> <select name="college" id="college" onchange="display_class()"> <option value="">请选择</option> </select> <label for="class">班级：</label> <select name="class" id="class" onchange="display_student()"> <option value="">请选择</option> </select> <label for="student_num">学号：</label> <select name="student_num" id="student_num"> <option value="">请选择</option> </select> </body> </html>
ajax.js:
</pre><pre>
function display_college(){
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('get','show_college.php?rand='+ Math.random());
xmlHttp.onreadystatechange = function (){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var colleges = xmlHttp.responseXML.getElementsByTagName("college");
$('college').length = 0;
var myoption = document.createElement('OPTION');
myoption.text = "请选择";
myoption.value = "";
$('college').appendChild(myoption);
for(var i=0;i<colleges.length;i++){
var collegeID = colleges[i].childNodes[0].childNodes[0].nodeValue;
var collegeName = colleges[i].childNodes[1].childNodes[0].nodeValue;
var myoption = document.createElement('OPTION');
myoption.value = collegeID;
myoption.text = collegeName;
$('college').appendChild(myoption);
}
}
}
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
function display_class(){
var xmlHttp = new XMLHttpRequest();
college_id = $('college').value;
xmlHttp.open("get","show_class.php?college_id="+college_id+"&rand="+Math.random());
xmlHttp.onreadystatechange = function (){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var classes = xmlHttp.responseXML.getElementsByTagName('class');
$('class').length = 0;
$('student_num').length = 0;
var myoption = document.createElement('OPTION');
myoption.value = '';
myoption.text = '请选择';
$('class').appendChild(myoption);
for(var i=0;i<classes.length;i++){
var classID = classes[i].childNodes[0].childNodes[0].nodeValue;
var className = classes[i].childNodes[1].childNodes[0].nodeValue;
var myoption = document.createElement('OPTION');
myoption.value = classID;
myoption.text = className;
$('class').appendChild(myoption);
}
}
}
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
function display_student(){
var xmlHttp = new XMLHttpRequest();
class_id = $('class').value;
xmlHttp.open("get","show_student.php?class_id="+class_id+"&rand="+Math.random());
xmlHttp.onreadystatechange = function (){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var students = xmlHttp.responseXML.getElementsByTagName('student');
$('student_num').length = 0;
var myoption = document.createElement('OPTION');
myoption.value = '';
myoption.text = '请选择';
$('student_num').appendChild(myoption);
for(var i=0;i<students.length;i++){
var studentID = students[i].childNodes[0].childNodes[0].nodeValue;
className = students[i].childNodes[1].childNodes[0].nodeValue;
myoption = document.createElement('OPTION');
myoption.value = studentID;
myoption.text = studentID;
$('student_num').appendChild(myoption);
}
}
}
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
function $(id){
return document.getElementById(id);
}后台三个php文件（主要是为了实现三级联动的功能，所以就没过多关注后台，也没对代码就行整合优化）：
show_college.php:
<?php
header("Content-type:text/xml; charset=utf-8");
header("Cache-Control:no-cache");
$conn = mysql_connect("localhost","root","");
mysql_select_db("temp",$conn) or die("数据库连接失败：".mysql_error());
mysql_query("set names 'utf8'");
$sql = "select * from temp_college";
$query = mysql_query($sql);
$info = "<school>";
while($row = mysql_fetch_assoc($query)){
$info.= "<college>";
$info.= "<collegeID>".$row['collegeID']."</collegeID>";
$info.="<collegeName>".$row['collegeName']."</collegeName>";
$info.="</college>";
}
$info.="</school>";
mysql_close($conn);
echo $info;
?>show_class.php:
<?php
header("Content-type:text/xml; charset=utf-8");
header("Cache-Control:no-cache;");
$conn = mysql_connect("localhost","root","");
mysql_select_db("temp",$conn) or die("数据库连接错误：".mysql_error());
mysql_query("set names 'utf8'");
$college_id = $_GET['college_id'];
$sql = "select classID,className from temp_class where collegeID=$college_id";
$query = mysql_query($sql);
$info = "<college>";
while($row = mysql_fetch_assoc($query)){
$info.="<class>";
$info.="<classID>".$row["classID"]."</classID>";
$info.="<className>".$row["className"]."</className>";
$info.="</class>";
}
$info.="</college>";
mysql_close($conn);
echo $info;
?>show_student.php:
<?php
header("Content-type:text/xml; charset=utf-8");
header("Cache-Control:no-cache;");
$conn = mysql_connect("localhost","root","");
mysql_select_db("temp",$conn) or die("数据库连接错误：".mysql_error());
mysql_query("set names 'utf8'");
$class_id = $_GET['class_id'];
$sql = "select studentNum,studentName from temp_student where classID=$class_id";
$query = mysql_query($sql);
$info = "<class>";
while($row = mysql_fetch_assoc($query)){
$info.="<student>";
$info.="<studentNum>".$row["studentNum"]."</studentNum>";
$info.="<studentName>".$row["studentName"]."</studentName>";
$info.="</student>";
}
$info.="</class>";
mysql_close($conn);
echo $info;
?>
在此说下基本思路吧：
1.第一次运行ajax：页面加载过程中调用js事件onload完成对学院下拉数据的选取。
2.第二次：在select标签加入onchange事件，当改变学院默认”请选择“选项时，运行一次，加载所属学院下的班级列表。选取学生原理同上。
3.后台通过对数据库的访问，对数据进行简单的处理，返回xml类型的数据，以供ajax.js文件方便访问。
小插曲：onchange事件与onselect事件区别：onselect 事件是选取页面上的内容时调用，而onchange事件是改变form表单原有内容时调用。