<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>級聯操作</title>
<!--引用jQuery-->
<script src="jquery-1.7.js"></script>
<script language="javascript">
var d = new Array();
d[0] = ["計算機科學與技術","網絡工程","軟件工程","自動化"];
d[1] = ["美術","音樂","舞蹈編導","表演","攝影"];
d[2] = ["哲學","經濟學","法學","漢語言文學"];
function setMajor() {
var index = $("[name = department]").val();
var major = $("[name = major]");
if(index!=-1) {
// 清空專業下拉列表
major.empty();
for(i=0;i<d[index].length;i++) {
// 產生一個option,參數爲(內容,位置);
var o = new Option(d[index][i],i+1);
// 將option追加到下拉列表末尾
major.append(o);
}
} else {
// 清空專業下拉列表
major.empty();
}
}
</script>
</head>
<body>
<select name="department" onChange="setMajor()">
<option value="-1">--請選擇--</option>
<option value="0">計算機學院</option>
<option value="1">藝術學院</option>
<option value="2">文學院</option>
</select>
<select name="major"></select>
</body>
</html>一個很簡單的級聯操作，通過jQuery實現。數據是靜態的，以後會考慮從數據庫中讀取。
jQuery中有簡單的解釋，有不懂的地方可以在評論中問我，我會詳細解釋。
這是剛學靜態頁面沒多久寫的，大神勿噴！
下邊的是效果圖：
