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>