js 四级联动
<!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>
