<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS聯動下拉框</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<script language="javascript">
/*
** ==================================================================================================
** 類名：CLASS_LIANDONG_YAO
** 功能：多級連動菜單
**
** 作者：YAODAYIZI
** ==================================================================================================
**/
function CLASS_LIANDONG_YAO(array) {
//數組，聯動的數據源
this.array = array;
this.indexName = '';
this.obj = '';
//設置子SELECT
// 參數：當前onchange的SELECT ID，要設置的SELECT ID
this.subSelectChange = function (selectName1, selectName2) {
//try
//{
var obj1 = document.all[selectName1];
var obj2 = document.all[selectName2];
var objName = this.toString();
var me = this;
obj1.onchange = function () {
me.optionChange(this.options[this.selectedIndex].value, obj2.id)
}
}
//設置第一個SELECT
// 參數：indexName指選中項,selectName指select的ID
this.firstSelectChange = function (indexName, selectName) {
this.obj = document.all[selectName];
this.indexName = indexName;
this.optionChange(this.indexName, this.obj.id)
}
// indexName指選中項,selectName指select的ID
this.optionChange = function (indexName, selectName) {
var obj1 = document.all[selectName];
var me = this;
obj1.length = 0;
obj1.options[0] = new Option("-請選擇-", '');
for (var i = 0; i < this.array.length; i++) {
if (this.array[i][1] == indexName) {
//alert(this.array[i][1]+" "+indexName);
obj1.options[obj1.length] = new Option(this.array[i][2], this.array[i][0]);
}
}
}
}
</script>
</head>
<body>
<form name="form1" method="post">
<SELECT ID="x1" NAME="x1">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x2" NAME="x2">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x3" NAME="x3">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x4" NAME="x4">
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="x5" NAME="x5">
<OPTION selected></OPTION>
</SELECT>
</form>
</body>
<script language="javascript">
//數據源 數據格式 ID，父級ID，顯示名稱
var array2 = new Array();//數據格式 ID，父級ID，名稱
array2[0] = new Array("貴州", "根目錄", "貴州");
array2[1] = new Array("貴陽", "貴州", "貴陽");
array2[2] = new Array("遵義", "貴州", "遵義");
array2[3] = new Array("匯川區", "遵義", "匯川區");
array2[4] = new Array("紅花崗區", "遵義", "紅花崗區");
array2[5] = new Array("上海路", "匯川區", "上海路");
array2[6] = new Array("南京路", "匯川區", "南京路");
array2[7] = new Array("丁字口", "紅花崗區", "丁字口");
array2[8] = new Array("遵義會議", "紅花崗區", "遵義會議");
//--------------------------------------------
//這是調用代碼
//設置數據源
var liandong2 = new CLASS_LIANDONG_YAO(array2);
//設置第一個選擇框
liandong2.firstSelectChange("根目錄", "x1");
//設置子選擇框
liandong2.subSelectChange("x1", "x2")
liandong2.subSelectChange("x2", "x3")
liandong2.subSelectChange("x3", "x4")
liandong2.subSelectChange("x4", "x5")
</script>
</html>
