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

2020-05-11 我要评论

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

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

点击下载此原代码

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

<html>

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>Test</title> 
<script> 
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<AN.length;i++) 
{ 
addSelect(AN[i].fyid,AN[i].text,ArrayName) 
} 
addSelect("add","<添加数据>",ArrayName) 
break;

case 1: 
for (i=0;i<AN.length;i++) 
{ 
if (AN[i].fatherid==fatherid) 
{ 
addSelect(AN[i].id,AN[i].text,ArrayName) 
} 
} 
addSelect("add","<添加数据>",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;i<tArray.length;i++) 
{ 
if (tArray[i]==c_sel) 
{ 
 if (i>0) {var lastsel=tArray[i-1]} 
 var nowsel=tArray[i] 
 if (i<tArray.length) {var nextsel=tArray[i+1]} 
} 
}

if (lastsel) {last_sel=eval("document.forms[0]."+lastsel)} 
now_sel=eval("document.forms[0]."+nowsel) 
if (nextsel) {next_sel=eval("document.forms[0]."+nextsel)}

if (now_sel.value=="add")  
{

if (lastsel) { 
 if (last_sel.selectedIndex==0 || last_sel.selectedIndex==last_sel.length-1) {alert("选择继承对象");return} 
showpop("pop.htm",nowsel,last_sel.value,last_sel.options[last_sel.selectedIndex].text) 
} 
else 
{ 
showpop("pop.htm",nowsel) 
} 
return 
}

if (now_sel.value=="null")  
{ 
del=false 
for (i=0;i<tArray.length;i++) 
{ 
if (tArray[i]==nextsel) del=true 
if (del) {removeall(tArray[i]) 
} 
} 
} 
else 
{ 
if (nextsel) loadSelect(nextsel,1,now_sel.value) 
}

}

//--打开新窗口-- 
function showpop(url,id,fatherid,fathertext){ 
sendvalue=new openvalue(id,fatherid,fathertext) 
    var width=300; 
    var height=140; 
    var w = 1024; 
    var h = 768;

if (document.all || document.layers) 
    { 
      w = screen.availWidth; 
      h = screen.availHeight; 
    }

var leftPos = (w/2-width/2); 
    var topPos = (h/2.3-height/2.3); 
var pop=window.open(url,"","width="+width+",height="+height+",top="+topPos+",left="+leftPos) 
} 
</script> 
</head> 
<script> 
//--添加费用类别-- 
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) 
}

</script> 
<body onload=pageload()> 
<b>演示中(演示无法添加数据，请下载原代码)</b>
 
<form name="frm"> 
    <p> 
    <select size="1" name="fy" onchange='change_select("fy")'> 
    <option value="null" style="background-color:#EEEEFF" selected>选择类别--</option> 
    <option value="add" style="background-color:#FFEEEE"><添加数据></option> 
    </select> 
    <select size="1" name="fl" onchange='change_select("fl")'> 
    <option value="null" style="background-color:#EEEEFF" selected>选择分类--</option> 
    </select> 
    <select size="1" name="mx" onchange='change_select("mx")'> 
    <option value="null" style="background-color:#EEEEFF" selected>选择明细--</option> 
    </select> 
    <select size="1" name="lb" onchange='change_select("lb")'> 
    <option value="null" style="background-color:#EEEEFF" selected>选择材料类别--</option> 
    </select> <input type="button" value="按钮" name="B1"></p> 
</form> 
</body>

</html>

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

打造个性化的Select(可编辑)

猜您喜欢

05-11一个很Cool的JS菜单效果
05-11多附件上传组件演示
05-11一个很简单的办法实现TD的加亮效果.
05-11Javascript 不能释放内存.
05-11一些有关检查数据的JS代码
05-11b/s开发常用javaScript技术
05-11加入收藏夹代码（兼容 gecko）
05-11Mozilla中显示textarea中选择的文字
05-11showModelessDialog()使用详解
05-11Javascript 事件捕获的备忘(setCapture,captureEvents)
05-11图片完美缩放
05-11prototype class详解
05-11javascript的函数
05-11IE中jscript/javascript的条件编译
05-11prototype 1.5 & scriptaculous 1.6.1 学习笔记
05-11彪哥1.1(智能表格)提供下载
05-11js输入中文效果
05-11js-穷举法 (y0h)

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

相关文章

猜您喜欢

今日热门