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;// 三个表单域的名称
}
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", ["亚信", "航天理想"]);
dsy.add("0_0", ["亚信联系人_1", "亚信联系人_2"]);
dsy.add("0_0_0", ["亚信联系人_1联系电话"]);
dsy.add("0_0_1", ["亚信联系人_2联系电话"]);
dsy.add("0_1", ["航天理想联系人_1", "航天理想联系人_2"]);
dsy.add("0_1_0", ["航天理想联系人_1联系电话"]);
dsy.add("0_1_1", ["航天理想联系人_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");
}
//isNaN()检查运算结果 http://tech.ccidnet.com/pub/article/c1115_a120997_p1.html
</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>