關(guān)聯(lián)的Select，可以支持客戶端動(dòng)態(tài)更新

2019-11-21 02:31:23

字體：大中小

供稿：網(wǎng)友

這是我很久就寫好了的一個(gè)小程序。關(guān)聯(lián)的Select，前后的select都是關(guān)聯(lián)的，前面的select影響到后面的內(nèi)容，為了防止服務(wù)器的重新讀的負(fù)擔(dān)，我加入了客戶端自動(dòng)更新功能，這樣每次更新都不必再讀取數(shù)據(jù)庫(kù)而刷新頁(yè)面。

雖然是為了我現(xiàn)在正在做的一個(gè)系統(tǒng)而設(shè)計(jì)的（可以運(yùn)用到數(shù)據(jù)庫(kù)里去），但是它的實(shí)現(xiàn)理論應(yīng)該有人會(huì)用得到吧。
現(xiàn)在我放出來(lái)讓大家研究，研究。也歡迎大家指出不足的地方。
下載文件

點(diǎn)擊下載此原代碼

演示(演示無(wú)法添加數(shù)據(jù)，請(qǐng)下載原代碼)

<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") //--主類別結(jié)構(gòu)-- function mainArray(fyid,text) { this.fyid=fyid this.text=text } //--關(guān)聯(lián)類別結(jié)構(gòu)-- 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 } //--添加數(shù)組-- 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) } } //--添加數(shù)據(jù)到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 } //--從數(shù)組里讀出數(shù)據(jù)-- 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","<添加數(shù)據(jù)>",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","<添加數(shù)據(jù)>",ArrayName) break; } } //--刪除所有選項(xiàng)-- function removeall(sel) { var selectbox=eval("document.forms[0]."+sel) selectbox.options.length=1 selectbox.options[0].selected } //--改變選擇時(shí)-- 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("選擇繼承對(duì)象");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> //--添加費(fèi)用類別-- addArray("1","","工程費(fèi)用","fy",0) addArray("2","","固定費(fèi)用","fy",0) //--添加分類-- addArray("1","1","包工包料","fl",1) addArray("2","1","人工","fl",1) addArray("3","1","材料","fl",1) addArray("4","1","運(yùn)雜費(fèi)","fl",1) addArray("5","1","消費(fèi)城管","fl",1) addArray("6","1","管理費(fèi)用","fl",1) addArray("7","1","稅費(fèi)","fl",1) addArray("8","1","交際費(fèi)","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) //--添加明細(xì)-- 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>演示中(演示無(wú)法添加數(shù)據(jù)，請(qǐng)下載原代碼)</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"><添加數(shù)據(jù)></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>選擇明細(xì)--</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需刷新才能執(zhí)行]

上一篇：打造個(gè)性化的Select(可編輯)

下一篇：一個(gè)很Cool的JS菜單效果