JS联动下拉框

来源：互联网发布：柏拉图软件注册不了编辑：程序博客网时间：2024/05/05 18:47

<!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="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>

9:最简单的二个下拉菜单连动范例
<select onchange='ok(this)' id=a><option>音乐<option>电影</select>
<select id=b>
</select>
<script>
function ok(objs){ //风云舞
if(objs.options[objs.selectedIndex].text=="音乐")b.outerHTML="<select id=b><option selected>音乐1<option>音乐2"
if(objs.options[objs.selectedIndex].text=="电影")b.outerHTML="<select id=b><option selected>电影1<option>电影2"
}
ok(a)
</script>