JavaScript 三级级联菜单

< HTML >
< HEAD >
< TITLE > 合同申请 </ TITLE >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< SCRIPT  LANGUAGE  = JavaScript >
/* * Define object Dsy 构造器
fieldValues - 三个表单域的名称, 可以通过 request.getParameter(xxx) 取值
defalutOptions - 默认选项
*/
function  Dsy(fieldValues, defalutOptions){
   this .Items  =  {};
   this .defalutOptions  =  defalutOptions; //  默认选项  
   this .fieldValues  =  fieldValues; //  三个表单域的名称
} 

Dsy.prototype.add  =   function (id, iArray){
   this .Items[id]  =  iArray;
} 

Dsy.prototype.Exists  =   function (id){
   if  ( typeof ( this .Items[id])  ==   " undefined " )
     return   false ;
   return   true ;
}; 

Dsy.prototype.setup  =   function () {
     this .bean_change( 0 );
} 

//  This prototype method added by BeanSoft Studio
Dsy.prototype.bean_change  =   function (v){
   var  str  =   " 0 " ;
   for  (i  =   0 ; i  <  v; i ++ ){
    str  +=  ( " _ "   +  (document.getElementById( this .fieldValues[i]).selectedIndex  -   1 ));
  }; 

   var  ss  =  document.getElementById( this .fieldValues[v]);
   //  Avoid a null exception
   if (ss  ==   null )  return ; 

     with (ss){
      length  =   0 ;
      options[ 0 ]  =   new  Option( this .defalutOptions[v],  this .defalutOptions[v]);
       if  (v  &&  document.getElementById( this .fieldValues[v  -   1 ]).selectedIndex  >   0   ||   ! v){
         if  ( this .Exists(str)){
          array  =   this .Items[str];
           for  (i  =   0 ; i  <  array.length; i ++ )
            options[length]  =   new  Option(array[i], array[i]);
           if  (v)
            options[ 1 ].selected  =   true ;
        }
      } 

       if  ( ++ v  <  s.length){
         this .bean_change(v);
      }
    }
} 

   function  change(v){    
    dsy.bean_change(v); //  Call test prototype
  } 

   //  Write form data string, 输出表单脚本代码
   //  dsy, object name
   //  varName, 变量名
   function  toString(dsy, varName) {
     var  str  =   "" ;
     for (i  =   0 ; i  <  dsy.fieldValues.length; i ++ ) {
        str  +=   " <select id=/ ""  + dsy.fieldValues[i] +  " / "  onChange=/ ""  + varName +  " .bean_change( "  + (i + 1)
            +  " );/ " ></select>/r/n " ;
    }
    str  +=   " <br/> " ;
     return  str;
  } 

//  第一个对象
   var  dsy  =   new  Dsy([ " s1 " ,  " s2 " ,  " s3 " ], [ " 销售方名称 " ,  " 销售方联系人 " ,  " 联系电话 " ]);
   var  dsy1  =   new  Dsy([ " s4 " ,  " s5 " ,  " s6 " ],  [ " 最终用户名称 " ,  " 最终用户联系人 " ,  " 联系电话 " ]);
   var  dsy2  =   new  Dsy(s  =  [ " s7 " ,  " s8 " ,  " s9 " ], [ " 厂商 " ,  " 厂商销售 " ,  " 联系电话 " ]); 

//  填入数据, 重复的代码
  dsy.add( " 0 " , [ " 单位1 " ,  " 单位2 " ]); 

  dsy.add( " 0_0 " , [ " 单位1联系人_1 " ,  " 单位1联系人_2 " ]);
  dsy.add( " 0_0_0 " , [ " 单位1联系人_1联系电话 " ]);
  dsy.add( " 0_0_1 " , [ " 单位1联系人_2联系电话 " ]); 

  dsy.add( " 0_1 " , [ " 单位2联系人_1 " ,  " 单位2联系人_2 " ]);
  dsy.add( " 0_1_0 " , [ " 单位2联系人_1联系电话 " ]);
  dsy.add( " 0_1_1 " , [ " 单位2联系人_2联系电话 " ]); 

  dsy1.add( " 0 " , [ " 最终用户1 " ,  " 最终用户2 " ]); 

  dsy1.add( " 0_0 " , [ " 最终用户1_联系人1 " ,  " 最终用户1_联系人2 " ]);
  dsy1.add( " 0_0_0 " , [ " 最终用户1_联系人1_电话 " ]);
  dsy1.add( " 0_0_1 " , [ " 最终用户1_联系人2_电话 " ]); 

  dsy1.add( " 0_1 " , [ " 最终用户2_联系人1 " ,  " 最终用户2_联系人2 " ]);
  dsy1.add( " 0_1_0 " , [ " 最终用户2_联系人1_电话 " ]);
  dsy1.add( " 0_1_1 " , [ " 最终用户2_联系人2_电话 " ]); 

  dsy2.add( " 0 " , [ " BEA " ,  " Horizon " ]); 

  dsy2.add( " 0_0 " , [ " 张学友 " ,  " BeanSoft " ]);
  dsy2.add( " 0_0_0 " , [ " 1234567890 " ]);
  dsy2.add( " 0_0_1 " , [ " beansoft@126.com " ]); 

  dsy2.add( " 0_1 " , [ " AAA " ,  " BBB " ]);
  dsy2.add( " 0_1_0 " , [ " AAA_99999 " ]);
  dsy2.add( " 0_1_1 " , [ " bbb_88888 " ]); 

   function  setup(){   //  Initialize the object
    dsy.setup();  // 依次调用 setup
    dsy1.setup();
    dsy2.setup();
  } 

function  prints1(){
    alert(document.frm.s1.value  +   "   "   +  document.frm.s2.value  +   "   "   +  document.frm.s3.value  + " /r/n " );
} 

</ SCRIPT >  

</ head >
< body  bgcolor ="#E0E0E0"  onload ="setup()" >
多级关联菜单：
< form  name ="frm" >  

<!--  方式1: 手工输出 HTML 代码, 便于排版
<select id="s1" onChange="dsy.bean_change(1);"></select>
<select id="s2" onChange="dsy.bean_change(2);"></select>
<select id="s3" onChange="dsy.bean_change(3);"></select>
<br>
<br>
<br>
<select id="s4" onChange="dsy1.bean_change(1);"></select>
<select id="s5" onChange="dsy1.bean_change(2);"></select>
<select id="s6" onChange="dsy1.bean_change(3);"></select>
<br>
<br>
<br>
<select id="s7" onChange="dsy2.bean_change(1);"></select>
<select id="s8" onChange="dsy2.bean_change(2);"></select>
<select id="s9" onChange="dsy2.bean_change(3);"></select>
-->
< SCRIPT  LANGUAGE ="JavaScript" >
<!--
//  方式2: 脚本输出表单 HTML 代码, 代码和上面注释掉的类似
document.write(toString(dsy,  " dsy " ));
document.write(toString(dsy1,  " dsy1 " ));
document.write(toString(dsy2,  " dsy2 " ));
// -->
</ SCRIPT >  

< input  type =button  name =b1  value ="监测"  onclick ="prints1()" >  

</ form >  

</ body >
</ html >