js three-level linkage

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS linkage drop-down box</title>
<script language="javascript" >
/*
** ====================================
** Class name: CLASS_LIANDONG_YAO
** Function: Multi-level linkage Menu
** Author: YAODAYIZI
**/ function CLASS_LIANDONG_YAO(array) { //Array, linked data source

this.array=array;
this.indexName='';
this.obj='';
//Set sub-SELECT
// Parameters: SELECT ID of current onchange, SELECT ID to be set
this.subSelectChange=function(selectName1,selectName2)
{
//try
//{
var obj1=document.all[selectName1];
var obj2=document.all[selectName2];
var objName=this.toString();
var me=this;
obj1.οnchange=function()
{
me.optionChange(this.options[this.selectedIndex].value,obj2.id)
}
}
//Set the first SELECT
// Parameters: indexName refers to the selected item, selectName refers to the ID of the select
this.firstSelectChange=function(indexName,selectName)
{
this.obj=document.all[selectName];
this.indexName=indexName;
this.optionChange(this.indexName,this.obj.id)
}
// indexName refers to the selected item, selectName refers to the ID of the select
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="s1" NAME="s1" >
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="s2" NAME="s2" >
<OPTION selected></OPTION>
</SELECT>
<SELECT ID="s3" NAME="s3">
<OPTION selected></OPTION>
</SELECT>
<br>
<br><br>
<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">
//Example 1---------------------------------------------- -----------------------
//Data source
var array=new Array();
array[0]=new Array("South China","Root Directory","South China Region"); //Data format ID, parent ID, name
array[1]=new Array("North China Region","Root Directory","North China Region");
array[2]=new Array("Shanghai","South China","Shanghai");
array[3]=new Array("Guangdong","South China","Guangdong");
array[4]=new Array("Xujiahui", "Shanghai","Xujiahui");
array[5]=new Array("Putuo","Shanghai","Putuo"); array[6]=new Array("Guangzhou","Guangdong","Guangzhou "); array[7]=new Array("Zhanjiang", "Guangdong","Zhanjiang"); //--------------------------------------------- ----- //This is the calling code var liandong=new CLASS_LIANDONG_YAO(array) //Set the data source

liandong.firstSelectChange("root directory","s1"); //Set the first selection box
liandong.subSelectChange("s1","s2"); //Set the child selection box
liandong.subSelectChange("s2", "s3");


//Example 2------------------------------------------------- ---------------
//Data source var array2=new Array();//Data format ID, parent ID, name array2[0]=new Array("Test Test", "Root Directory", "Test Test"); array2[1 ]=new Array("North China","Root Directory","North China"); array2[2]=new Array("Shanghai","Test Test","Shanghai"); array2[3]=new Array ("Guangdong","test test","Guangdong"); array2[4]=new Array("Xujiahui","Shanghai","Xujiahui"); array2[5]=new Array("Putuo"," Shanghai","Putuo"); array2[6]=new Array("Guangzhou","Guangdong","Guangzhou"); array2[7]=new Array("Zhanjiang","Guangdong","Zhanjiang") ; array2[8]=new Array("Don't know","Zhanjiang", "Don't know"); array2[9]=new Array("5555","Zhanjiang","555"); array2[10]=new Array("++++","Don't know","++ ++"); array2[11]=new Array("111","Xujiahui","111"); array2[12]=new Array("222","111","222");

array2[13]=new Array("333","222","333");
//-------------------------- ------------------
//This is the calling code
//Set the data source
var liandong2=new CLASS_LIANDONG_YAO(array2);
//Set the first selection box
liandong2.firstSelectChange(" Root directory","x1");
//Set the sub-select box
liandong2.subSelectChange("x1","x2")
liandong2.subSelectChange("x2","x3")
liandong2.subSelectChange("x3","x4" )
liandong2.subSelectChange("x4","x5")
</script>
</html>

おすすめ