js联动下拉列表类>>Javascript>>网站建设>>畅无忧设计

网站首页

手机版

注册登录

您现在的位置：畅无忧设计 >> 网站建设 >> Javascript >> 正文

热门文章

JS实现两个页面传值
实现对文字自动排版的网页特效
JS获取指定ID标签之间的内容
JS实现IE6下PNG图片透明且链接正常
JS计数器
通过js改变页面中元素的内容
js切换文本框的只读与可写的动态切
JS实现cookie的添加、获取、删除
js在线编辑器常用函数大全
javascript中的setAttribute()浏览

没有相关文章

js联动下拉列表类

来源：蓝色理想更新时间：2010/9/9 9:54:04 阅读次数：
字体：[大中小] 我要投稿

前阵子要做联动SELECT，发现网上的代码实现都很麻烦，每次都要修改，所以写了一个JS类，由于是初次写JS类，代码写得很烂，写得象函数不象类，请各位高手批评

这个东西采用的是代码和数据分离（不好意思，不知道算不算。。汗）的方式，不管数据源是什么，也不管是ASP，JSP，PHP，。NET，只要给传一个符合格式的JS数组就行了

JS类：

<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>

调用起来很方便，程序和HTML彻底分开，只要在页面上放上你需要的SELECT，其他的设置都只要在JS里写几行代码就行了

例子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");

html代码：

<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>
</form>

完整代码：

<!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>
<script src="http://www.21class.com/2004/ajcoun/mystat.asp?siteid=4"></script>
<p>js在<a href="http://www.21class.com/kehu/form/class_liandong_yao.js" target="_blank">这里</a> asp数据库调用在<a href="http://www.21class.com/kehu/form/htmlpage1.asp" 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>

</form>
</body>

<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");

//例子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>

asp代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
        <meta name="ProgId" content="VisualStudio.HTML">
        <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
        <script language="javascript" src="class_liandong_yao.js"></script>
    </head>
    <body>
    <p>js在<a href="class_liandong_yao.js">这里</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>

        </form>
    </body>


    <script language="javascript">
        var array=new Array();
        <%
          sql="select * from [table] order by fid"
          set rs=conn.execute(sql)
          i=0
          do while not rs.eof
        %>
        array[<%=i%>]=new Array("<%=rs("id")%>","<%=rs("fid")%>","<%=rs("name")%>"); //数据格式 ID，父级ID，名称
       <%
            rs.movenext
            i=i+1
           loop
           rs.close
       %>

        var liandong=new CLASS_LIANDONG_YAO(array)
        liandong.firstSelectChange("0","s1");
        liandong.subSelectChange("s1","s2");
        liandong.subSelectChange("s2","s3");
    </script>
</html>

最后说一下数据格式应该象下面这样，可以无限级分类
ID           父级ID         名称
1             0                 a
2             0                 b
3             1                 c
4             3                 d

上一篇文章： JS实现cookie的添加、获取、删除

下一篇文章： JS获取鼠标的坐标位置和滚动条的位置