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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 关联的Select，可以支持客户端动态更新

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 371 ::

收藏到网摘: n/a

[原创]比较方便的onMouseWheel缩放图片效果 Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本

这是我很久就写好了的一个小程序。关联的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"> <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">
</form>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

[原创]比较方便的onMouseWheel缩放图片效果 Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本

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

评论 (0) All

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