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

更新时间：2006年09月07日 00:00:00 作者：

这是我很久就写好了的一个小程序。关联的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需再刷新一下页面才能执行]

无间断滚动marquee的详细用法解析
无间断滚动marquee的详细用法解析...
2006-08-08
通过实例理解javascript中没有函数重载的概念
这篇文章主要介绍了通过实例理解javascript中没有函数重载的概念,十分的简单易懂，需要的朋友可以参考下
2015-06-06
微信小程序实现简单日历效果
这篇文章主要为大家详细介绍了微信小程序实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
js 实现picker 选择器示例详解
这篇文章主要为大家介绍了js 实现picker 选择器示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
JavaScript中数组去重常用的五种方法详解
去重是开发中经常会碰到的一个热点问题，这篇文章主要介绍了JS中实现数组去重中常用的5个方法，文中的示例代码讲解详细，感兴趣的可以了解一下
2022-06-06
JS实现自定义弹窗功能
浏览器自带的原生弹窗很不美观，而且功能比较单一，绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等。下面小编给大家带来了JS实现自定义弹窗，感兴趣的朋友一起看看吧
2018-08-08
javascript 限制输入脚本大全
javascript限制输入脚本大全 ,方便网页设计的朋友经常能用的到，建议收藏下。代码有点慢，大家慢慢看啊。
2009-11-11
JavaScript常用语句循环,判断,字符串换数字
这篇文章主要介绍了JavaScript常用语句主要包括对循环,判断,字符串换数字相关资料的介绍，具有一定的参考价值，需要的小伙伴可以参考一下具体内容
2021-12-12
小程序点击图片实现自动播放视频
这篇文章主要为大家详细介绍了小程序点击图片实现自动播放视频，停止上一个视频播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
javascript比较两个日期的先后示例代码
这篇文章主要介绍了javascript比较两个日期的先后示例代码，非常的不错，这里推荐给有相同需求的小伙伴。
2014-12-12

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具