关联的Select，可以支持客户端动态更新

这是我很久就写好了的一个小程序。关联的Select，前后的select都是关联的，前面的select影响到后面的内容，为了防止服务器的重新读的负担，我加入了客户端自动更新功能，这样每次更新都不必再读取数据库而刷新页面。

虽然是为了我现在正在做的一个系统而设计的（可以运用到数据库里去），但是它的实现理论应该有人会用得到吧。
现在我放出来让大家研究，研究。也欢迎大家指出不足的地方。
点击下载此原代码

演示(演示无法添加数据，请下载原代码)

Test

var fy=new Array()
var fl=new Array()
var mx=new Array()
var lb=new Array()
var sendvalue=new openvalue("","","")
var tArray=new Array("fy","fl","mx","lb")

//--主类别结构--
function mainArray(fyid,text)
{
this.fyid=fyid
this.text=text
}

//--关联类别结构--
function childArray(id,fatherid,text)
{
this.id=id
this.fatherid=fatherid
this.text=text
}

function openvalue(whatdo,fid,ftext)
{
this.whatdo=whatdo
this.fid=fid
this.ftext=ftext
}

//--添加数组--
function addArray(id,fatherid,text,ArrayName,Type)
{
var AN=eval(ArrayName)
if (Type==0) { AN[AN.length]=new mainArray(id,text) }
if (Type==1) { AN[AN.length]=new childArray(id,fatherid,text) }
}

//--添加数据到select--
function addSelect(value,text,sel)
{
var selectbox=eval("document.forms[0]."+sel)
var newoption=document.createElement("OPTION");
selectbox.add(newoption)
if (value=="add")
{
newoption.text=text
selectbox.options[selectbox.length-1].style.backgroundColor="#FFEEEE"
}
else
{
newoption.text=" "+text
}
newoption.value=value
}

//--从数组里读出数据--
function loadSelect(ArrayName,Type,fatherid)
{
removeall(ArrayName)
var AN=eval(ArrayName)
switch (Type){
case 0:
for (i=0;i",ArrayName)
break;

case 1:
for (i=0;i",ArrayName)
break;
}

}

//--删除所有选项--
function removeall(sel)
{
var selectbox=eval("document.forms[0]."+sel)
selectbox.options.length=1
selectbox.options[0].selected
}

//--改变选择时--
function change_select(c_sel){
for (i=0;i0) {var lastsel=tArray[i-1]}
var nowsel=tArray[i]
if (i

//--添加费用类别--
addArray("1","","工程费用","fy",0)
addArray("2","","固定费用","fy",0)

//--添加分类--
addArray("1","1","包工包料","fl",1)
addArray("2","1","人工","fl",1)
addArray("3","1","材料","fl",1)
addArray("4","1","运杂费","fl",1)
addArray("5","1","消费城管","fl",1)
addArray("6","1","管理费用","fl",1)
addArray("7","1","税费","fl",1)
addArray("8","1","交际费","fl",1)

addArray("9","2","工资","fl",1)
addArray("10","2","房租","fl",1)
addArray("11","2","水电","fl",1)
addArray("12","2","电话","fl",1)
addArray("13","2","办公用品","fl",1)
addArray("14","2","广告","fl",1)

//--添加明细--
addArray("1","1","铝合金","mx",1)
addArray("2","1","不锈钢","mx",1)
addArray("3","1","家具","mx",1)
addArray("4","2","木工","mx",1)
addArray("5","2","泥工","mx",1)
addArray("6","2","水工","mx",1)

//--添加材料类别--
addArray("1","1","铝合金1","lb",1)
addArray("2","1","铝合金2","lb",1)
addArray("3","1","铝合金3","lb",1)

function pageload(){
loadSelect("fy",0)
}

演示中(演示无法添加数据，请下载原代码)

选择类别--

选择分类--

选择明细--

选择材料类别--

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]