2005 年的时候帮人收集整理修改的一份脚本级联菜单, 没用到 AJAX, 写死的数据. 效果自己试试就知道了. 支持主流浏览器. 自己现在看看这代码就觉得头大… 呵呵 脚本就是脚本啊. 一段时间放下就看不懂了.

 

< 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; // 三个表单域的名称
}  </p>

Dsy.prototype.add </span> =   function (id, iArray){
 
this .Items[id] = iArray;
}  </p>

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

Dsy.prototype.setup </span> =   function () {
   
this .bean_change( );
}  </p>

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

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

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

      </span> if ( ++ v < s.length){
       
this .bean_change(v);
      }
    }
}  </p>

  </span> function change(v){    
    dsy.bean_change(v);
// Call test prototype
  }  </p>

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

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

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

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

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

  dsy1.add(</span> " " , [ " 最终用户1 " , " 最终用户2 " ]);  </p>

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

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

  dsy2.add(</span> " " , [ " BEA " , " Horizon " ]);  </p>

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

  dsy2.add(</span> " 0_1 " , [ " AAA " , " BBB " ]);
  dsy2.add(
" 0_1_0 " , [ " AAA_99999 " ]);
  dsy2.add(
" 0_1_1 " , [ " bbb_88888 " ]);  </p>

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

</span>function prints1(){
    alert(document.frm.s1.value
+   "   "   + document.frm.s2.value +   "   "   + document.frm.s3.value + " rn " );
}  </p>

</span></ SCRIPT >   </p>

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

</span><!– 方式1: 手工输出 HTML 代码, 便于排版





















–>
< SCRIPT LANGUAGE ="JavaScript" >
<!–
// 方式2: 脚本输出表单 HTML 代码, 代码和上面注释掉的类似
document.write(toString(dsy, " dsy " ));
document.write(toString(dsy1,
" dsy1 " ));
document.write(toString(dsy2,
" dsy2 " ));
// –>
</ SCRIPT >   </p>

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

</span></ form >   </p>

</span></ body >
</ html >  
</div>

转载请注明:WebLogic Android 博客 » JavaScript 三级级联菜单