Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Các menu xổ dọc tự động
URL: https://www.javascriptbank.com/autoload-dropdowns.html
Hiệu ứng tạo ra các trình đơn xổ dọc hiển thị nội dung khi ta chọn cái trước nó.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Các menu xổ dọc tự động
URL: https://www.javascriptbank.com/autoload-dropdowns.html
<FORM name=mess><TABLE cellPadding=4 border=0> <TBODY> <TR> <TD> <P><B>First</B></P></TD> <TD> <P><B><SELECT style="WIDTH: 140px" onchange="SelDrop(this,'mess','sf1',0)" name=us1> <OPTION value=0 selected>- None selected -<OPTION value=F1>First Op<OPTION value=F2>Second Op</OPTION></SELECT></B></P></TD> <TD></TD> <TD> <P><B><FONT color=#ff0000>First form</FONT></B></P></TD></TR> <TR> <TD> <P><B>Second</B></P></TD> <TD> <P><SELECT style="WIDTH: 140px" name=sf1> <OPTION value=0 selected></OPTION></SELECT></P></TD></TR> <TR> <TD> <P><B>Third</B></P></TD> <TD> <P><SELECT style="WIDTH: 140px" onchange="SelDrop(this,'mess2','sf3',2)" name=us2> <OPTION value=0 selected>- None selected -<OPTION value=F3>Third Op<OPTION value=F4>fourth Op</OPTION></SELECT></P></TD></TR> <TR> <TD> <P><B>Fourth</B></P></TD> <TD> <P><SELECT style="WIDTH: 140px" name=sf2> <OPTION value=0 selected></OPTION></SELECT></P></TD> <TD> <P><B>Fifth</B></P></TD> <TD> <P><SELECT style="WIDTH: 140px" name=sf3> <OPTION value=0 selected></OPTION></SELECT></P></TD></TR></TBODY></TABLE></FORM><FORM name=mess2><TABLE cellPadding=4 border=0> <TBODY> <TR> <TD> <P><B>First</B></P></TD> <TD> <P><SELECT style="WIDTH: 140px" onchange="SelDrop(this, 'mess2','sf1',4)" name=us3> <OPTION value=0 selected>- None selected -<OPTION value=F5>Fifth Op<OPTION value=F6>Sixth Op</OPTION></SELECT></P></TD> <TD></TD> <TD> <P><B><FONT color=#ff0000>Second form</FONT></B></P></TD></TR> <TR> <TD> <P><B>Second</B></P></TD> <TD> <P><SELECT style="WIDTH: 140px" name=sf1> <OPTION value=0 selected></OPTION></SELECT></P></TD></TR> <TR> <TD> <P><B>Third</B></P></TD> <TD> <P><SELECT style="WIDTH: 140px" onchange="SelDrop(this, 'mess','sf3',6)" name=us4> <OPTION value=0 selected>- None selected -<OPTION value=F7>Seventh Op<OPTION value=F8>Eighth Op</OPTION></SELECT></P></TD></TR> <TR> <TD> <P><B>Fourth</B></P></TD> <TD> <P><SELECT style="WIDTH: 140px" name=sf2> <OPTION value=0 selected></OPTION></SELECT> </P> <TD> <P><B>Fifth</B></P></TD> <TD> <P><SELECT style="WIDTH: 140px" name=sf3> <OPTION value=0 selected></OPTION></SELECT></P></TD></TR></TBODY></TABLE></FORM><SCRIPT language=javascript><!-- Original Programmed by Ira Sterbakov - [email protected] 1/8/03 --><!-- May be freely used and modified - email notification would be nice -->aDr = new Array(30);sP = new Array(8);//lIST OF START POINTS FOR THE VARIOUS SELECTIONS//NOTE: last entry is fictious start point point of future additional selects//If you understand the system you can even use various selections for more than one form //with a little playing around with the sP array. Every use uses two sP values. The way it is//written I double use each and go in order. You can have pairs of start stop sP values though.sP[0] = 0;sP[1] = 5;sP[2] = 9;sP[3] = 12;sP[4] = 20;sP[5] = 21;sP[6] = 24;sP[7] = 27;sP[8] = 30;aDr[0] = new Set2val('Sel0','Selection 0');aDr[1] = new Set2val('Sel1','Selection 1');aDr[2] = new Set2val('Sel2','Selection 2');aDr[3] = new Set2val('Sel3','Selection 3');aDr[4] = new Set2val('Sel4','Selection 4');aDr[5] = new Set2val('Sel5','Selection 5');aDr[6] = new Set2val('Sel6','Selection 6');aDr[7] = new Set2val('Sel7','Selection 7');aDr[8] = new Set2val('Sel8','Selection 8');aDr[9] = new Set2val('Sel9','Selection 9');aDr[10] = new Set2val('Sel10','Selection 10');aDr[11] = new Set2val('Sel11','Selection 11');aDr[12] = new Set2val('Sel12','Selection 12');aDr[13] = new Set2val('Sel13','Selection 13');aDr[14] = new Set2val('Sel14','Selection 14');aDr[15] = new Set2val('Sel15','Selection 15');aDr[16] = new Set2val('Sel16','Selection 16');aDr[17] = new Set2val('Sel17','Selection 17');aDr[18] = new Set2val('Sel18','Selection 18');aDr[19] = new Set2val('Sel19','Selection 19');aDr[20] = new Set2val('Sel20','Selection 20');aDr[21] = new Set2val('Sel21','Selection 21');aDr[22] = new Set2val('Sel22','Selection 22');aDr[23] = new Set2val('Sel23','Selection 23');aDr[24] = new Set2val('Sel24','Selection 24');aDr[25] = new Set2val('Sel25','Selection 25');aDr[26] = new Set2val('Sel26','Selection 26');aDr[27] = new Set2val('Sel27','Selection 27');aDr[28] = new Set2val('Sel28','Selection 28');aDr[29] = new Set2val('Sel29','Selection 29');function Set2val(V1,V2){this.Id = V1;this.Description = V2;}function SelDrop(Sels,fn,sname,snum)<!-- Another small but powerful function by Ira --><!-- Original Programmed by Ira Sterbakov - [email protected] 1/8/03 --><!-- May be freely used and modified - email notification would be nice -->{NewListad = eval("document." + fn + "." + sname);NewListad.options.length = 0;if (Sels.selectedIndex > 0){nP = Sels.selectedIndex + snum;nsn = sP[nP - 1];nen = sP[nP];for ( i1 = nsn; i1 < nen; i1++ ){NewListad.options[i1 - nsn] = new Option(aDr[i1].Description,aDr[i1].Id);}}}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->