JavaScriptBank
23-09-2009, 07:50 AM
Hiệu ứng tạo ra các trình đơn (http://www.javascriptbank.com/javascript/menu/) xổ dọc hiển thị nội dung khi ta chọn cái trước nó.... chi tiết (http://www.javascriptbank.com/autoload-dropdowns.html/vi//)
http://www.javascriptbank.com/javascript.images/form/autoload-dropdowns.jpg (http://www.javascriptbank.com/autoload-dropdowns.html/vi/)
Demo: Các menu xổ dọc tự động (http://www.javascriptbank.com/javascript/form/dropdown/autoload-dropdowns/preview/vi/)
Cách cài đặt
Bước 1: Đặt mã HTML bên dưới vào phần BODY
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
-->
Các hiệu ứng tương tự
- Trình đơn định hướng xổ dọc (http://www.javascriptbank.com/select-option-navigation-menu.html/vi/)
- Trình đơn xổ dọc đơn giản (http://www.javascriptbank.com/simple-drop-down-navigations.html/vi/)
- Hộp thông tin cho trình đơn xổ dọc (http://www.javascriptbank.com/drop-down-info-box.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Biểu mẫu (http://www.javascriptbank.com/javascript/form/vi/) và Trình đơn xổ dọc (http://www.javascriptbank.com/javascript/form/dropdown/vi/)
Pop up luôn nổi (http://www.javascriptbank.com/always-on-top-popup.html/vi/) - Phân trang cho website (http://www.javascriptbank.com/forum/phan-trang-cho-website-t172.html) - Popup luôn ở phía trên (http://www.javascriptbank.com/always-on-top-popup.html/vi/)
http://www.javascriptbank.com/javascript.images/form/autoload-dropdowns.jpg (http://www.javascriptbank.com/autoload-dropdowns.html/vi/)
Demo: Các menu xổ dọc tự động (http://www.javascriptbank.com/javascript/form/dropdown/autoload-dropdowns/preview/vi/)
Cách cài đặt
Bước 1: Đặt mã HTML bên dưới vào phần BODY
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
-->
Các hiệu ứng tương tự
- Trình đơn định hướng xổ dọc (http://www.javascriptbank.com/select-option-navigation-menu.html/vi/)
- Trình đơn xổ dọc đơn giản (http://www.javascriptbank.com/simple-drop-down-navigations.html/vi/)
- Hộp thông tin cho trình đơn xổ dọc (http://www.javascriptbank.com/drop-down-info-box.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Biểu mẫu (http://www.javascriptbank.com/javascript/form/vi/) và Trình đơn xổ dọc (http://www.javascriptbank.com/javascript/form/dropdown/vi/)
Pop up luôn nổi (http://www.javascriptbank.com/always-on-top-popup.html/vi/) - Phân trang cho website (http://www.javascriptbank.com/forum/phan-trang-cho-website-t172.html) - Popup luôn ở phía trên (http://www.javascriptbank.com/always-on-top-popup.html/vi/)