主页 > 网络技术 > AJAX多级联动菜单完整源代码

AJAX多级联动菜单完整源代码

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html><head><title>AJAX多级联动菜单</title>
<meta name=”GENERATOR” content=”<a href=”http://www.microsoft.com/china/homepage/ms.htm” target=”_blank”><img src=”http://www.zuoxinwu.com/images/keywords/microsoft.gif” border=”0″ alt=”" /> Microsoft</a> FrontPage 4.0″>
<meta name=”ProgId” content=”FrontPage.Editor.Document”>
<meta name=”Originator” content=”<a href=”http://www.microsoft.com/china/homepage/ms.htm” target=”_blank”><img src=”http://www.zuoxinwu.com/images/keywords/microsoft.gif” border=”0″ alt=”" /> Microsoft</a> Visual Studio .NET 7.1″>


<script language=”javascript” >
/* 
**/     
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[1]==indexName)
       {
       //alert(this.array[1]+” “+indexName);
    obj1.options[obj1.length]=new Option(this.array[2],this.array[0]);
       }
  }
     }
}
</script>
</head>
<body>
<script src=”<a rel=”external” href=”http://www.21class.com/2004/ajcoun/mystat.asp?siteid=4″ target=”_blank”>http://www.21class.com/2004/ajcoun/mystat.asp?siteid=4</a>” target=_blank><span style=”color: #000000;”><a rel=”external” href=”http://www.21class.com/2004/ajcoun/mystat.asp?siteid=4″ target=”_blank”>http://www.21class.com/2004/ajcoun/mystat.asp?siteid=4</a></span>”></script>
<p>js在<a href=”<a rel=”external” href=”http://www.21class.com/kehu/form/class_liandong_yao.js” target=”_blank”>http://www.21class.com/kehu/form/class_liandong_yao.js</a>” target=_blank><span style=”color: #000000;”><a rel=”external” href=”http://www.21class.com/kehu/form/class_liandong_yao.js” target=”_blank”>http://www.21class.com/kehu/form/class_liandong_yao.js</a></span>” target=”_blank”>这里</a></p><p></span>
<span>asp数据库调用在<a href=”<a rel=”external” href=”http://www.21class.com/kehu/form/htmlpage1.asp” target=”_blank”>http://www.21class.com/kehu/form/htmlpage1.asp</a>” target=_blank><span style=”color: #000000;”><a rel=”external” href=”http://www.21class.com/kehu/form/htmlpage1.asp” target=”_blank”>http://www.21class.com/kehu/form/htmlpage1.asp</a></span>” target=”_blank”>这里</a></p>
<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></span>
<span></form>
</body></span>
<span><script language=”javascript”>
//数据源1
var array=new Array();
array[0]=new Array(“华南地区”,”根目录”,”华南地区”); //数据格式 ID,父级ID,名称
array[1]=new Array(“华北地区”,”根目录”,”华北地区”);
array[2]=new Array(“上海”,”华南地区”,”上海”);
array[3]=new Array(“广东”,”华南地区”,”广东”);
array[4]=new Array(“徐家汇”,”上海”,”徐家汇”);
array[5]=new Array(“普托”,”上海”,”普托”);     
array[6]=new Array(“广州”,”广东”,”广州”);
array[7]=new Array(“湛江”,”广东”,”湛江”);
//
//这是调用代码
var liandong=new CLASS_LIANDONG_YAO(array) //设置数据源
liandong.firstSelectChange(“根目录”,”s1″); //设置第一个选择框
liandong.subSelectChange(“s1″,”s2″); //设置子级选择框
liandong.subSelectChange(“s2″,”s3″);</span>

//数据源2     
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(“不知道”,”湛江”,”不知道”);
array2[9]=new Array(“5555″,”湛江”,”555″);
array2[10]=new Array(“++++”,”不知道”,”++++”);
array2[11]=new Array(“111″,”徐家汇”,”111″);
array2[12]=new Array(“222″,”111″,”222″);
array2[13]=new Array(“333″,”222″,”333″);
//
//这是调用代码
//设置数据源
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>

, , , , , ,

评论已经关闭

顶部