»
Tiếng AnhTiếng PhápTiếng Việt

In - Các mục chọn được canh lề - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Các mục chọn được canh lề
URL: https://www.javascriptbank.com/editable-dropdowns.html

Các mục chọn được canh lề © JavaScriptBank.comHiệu ứng tạo ra các dropdown menu với những tùy chọn được canh lề khác nhau.

Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Trình đơn xổ dọc » Các mục chọn được canh lề
URL: https://www.javascriptbank.com/editable-dropdowns.html



CSS
<style>H1{    COLOR: #000066;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 18px;    FONT-WEIGHT: bold}H2{    COLOR: #000066;    FONT-FAMILY: Arial,Verdana, Helvetica;    FONT-SIZE: 14px;    FONT-WEIGHT: bold}H3{    COLOR: #000066;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 18px;    FONT-WEIGHT: bold}H4{    COLOR: #000066;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 16px;    FONT-WEIGHT: bold}H5{    COLOR: #000066;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 13px;    FONT-WEIGHT: bold}H6{    COLOR: #000066;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 10px;    FONT-WEIGHT: bold}H7{    COLOR: #000066;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 10px;    FONT-WEIGHT: bold}A:link{    COLOR: #3366cc;    FONT-FAMILY: Verdana, Arial;    FONT-SIZE: 12px;    FONT-WEIGHT: bold;    TEXT-DECORATION: none}A:visited{    COLOR: #3366cc;    FONT-FAMILY: Verdana, Arial;    FONT-SIZE: 12px;    FONT-WEIGHT: bold;    TEXT-DECORATION: none}A:hover{    COLOR: #000066;    FONT-FAMILY: Verdana, Arial;    FONT-SIZE: 12px;    FONT-WEIGHT: bold;    TEXT-DECORATION: none}P{    COLOR: #000000;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 12px}P.header{    COLOR: #006400;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 14px}P.AuthorNotes{    COLOR: #0000ff;    FONT-FAMILY: Times New Roman,verdana, Arial;    FONT-STYLE: italic;    FONT-SIZE: 14px}DL{    COLOR: #000000;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 12px}OL{    COLOR: #000000;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 12px}UL{    COLOR: #000000;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 12px}LI{    COLOR: #000000;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 12px}BLOCKQUOTE{    COLOR: #000000;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 12px}SPAN{    COLOR: #000000;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 12px}TD{    COLOR: #000000;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 11px}TD.cType{    COLOR: #0000f0;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 11px}TD.Text{    COLOR: maroon;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 13px}THEAD{    COLOR: #000000;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 12px}TFOOT{    COLOR: #000000;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 12px}TH{    COLOR: #000000;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 12px}TABLE{    COLOR: #000000;    FONT-FAMILY: Verdana, Helvetica, Arial;    FONT-SIZE: 12px}BODY{    BACKGROUND-COLOR: #faf0e6}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script language="JavaScript">/*************  FIXED WIDTH, Left to Right Flow  *****************Editable Dropdown in the format:Left Aligned,Fixed Width,Left To Right Flow  * use .innerText instead of .Text*****************************************/    /*    ---Variables required for     fnChangeHandler() & fnKeyPressHandler()     for Editable Dropdowns--     Subrata Chakrabarty 3.Jan.2003     */    var PreviousSelectIndex = 0;           /* Contains the Previously Selected Index */        var SelectIndex = 0;                   /* Contains the Currently Selected Index  */        var SelectChange = 'MANUAL_CLICK';         /* Indicates whether Change in dropdown selected value */                         /* was due to a Manual Click                           *//* or due to System properties of dropdown             */    /*    -----Functions required for  Editable Dropdowns    -- Subrata Chakrabarty 3.Jan.2003     */        function fnChangeHandler()    {      PreviousSelectIndex = SelectIndex;             /* Contains the Previously Selected Index */            SelectIndex = document.frmName.lstDropDown.options.selectedIndex;      /* Contains the Currently Selected Index  */            if ((PreviousSelectIndex == (document.frmName.lstDropDown.options.length - 1)) && (SelectIndex != (document.frmName.lstDropDown.options.length - 1))&&(SelectChange != 'MANUAL_CLICK'))       /* To Set value of Index variables - Subrata Chakrabarty 3.Jan.2003 */            {        document.frmName.lstDropDown[(document.frmName.lstDropDown.options.length - 1)].selected=true;        PreviousSelectIndex = SelectIndex;        SelectIndex = document.frmName.lstDropDown.options.selectedIndex;                SelectChange = 'MANUAL_CLICK';                 /* Indicates that the Change in dropdown selected value was due to a Manual Click */      }    }            function fnKeyPressHandler()    {      if(document.frmName.lstDropDown.options.length != 0)      /*if dropdown is not empty*/              if (document.frmName.lstDropDown.options.selectedIndex == (document.frmName.lstDropDown.options.length - 1))        /*if option the Editable field i.e. the last option */                {          var EditString = EditMe.innerText;              /* Contents of Editable Option */                    if (EditString == "--?--")                      /* On backspace on default value of Editable option make Editable option Null */                      EditString = "";                      if ((window.event.keyCode==8 || window.event.keyCode==127))           /* To handle backspace - Subrata Chakrabarty 3.Jan.2003 */          {            EditString = EditString.substring(0,EditString.length-1);             /* Decrease length of string by one from right */                        SelectChange = 'MANUAL_CLICK';                  /* Indicates that the Change in dropdown             selected value was due to a Manual Click */                      }                    /* Check for allowable Characters  */                    /*          The various characters allowable for entry into Editable option..          may be customized by minor modifications in the code (if condition below)          (you need to know the keycode/ASCII value of the  character to be allowed/disallowed.          - Subrata Chakrabarty 3.Jan.2003          */                    if ((window.event.keyCode==46) || (window.event.keyCode>47 && window.event.keyCode<59)||(window.event.keyCode>62 && window.event.keyCode<127) ||(window.event.keyCode==32))           /* To handle addition of a character - Subrata Chakrabarty 3.Jan.2003 */          {            EditString+=String.fromCharCode(window.event.keyCode);            /*Concatenate Enter character to Editable string*/                        /* The following portion handles the "automatic Jump" bug*/            /*            The "automatic Jump" bug (Description):               If a alphabet is entered (while editing)               ...which is contained as a first character in one of the read-only options               ..the focus automatically "jumps" to the read-only option               (-- this is a common property of normal dropdowns                ..but..is undesirable while editing).            */                        var i=0;            var EnteredChar = String.fromCharCode(window.event.keyCode);            var UpperCaseEnteredChar = EnteredChar;            var LowerCaseEnteredChar = EnteredChar;                        if(((window.event.keyCode)>=97)&&((window.event.keyCode)<=122))            /*if EnteredChar lowercase*/                          UpperCaseEnteredChar = String.fromCharCode(window.event.keyCode - 32);               /*This is UpperCase*/                          if(((window.event.keyCode)>=65)&&((window.event.keyCode)<=90))            /*if EnteredChar is UpperCase*/                          LowerCaseEnteredChar = String.fromCharCode(window.event.keyCode + 32);               /*This is lowercase*/                          for (i=0;i<(document.frmName.lstDropDown.options.length-1);i++)            { var ReadOnlyString = document.frmName.lstDropDown[i].innerText;              var FirstChar = ReadOnlyString.substring(0,1);              if((FirstChar == UpperCaseEnteredChar)||(FirstChar == LowerCaseEnteredChar))              {                SelectChange = 'AUTO_SYSTEM';                   /* Indicates that the Change in dropdown                 selected value was due to System properties of dropdown */                                break;              }              else              {                SelectChange = 'MANUAL_CLICK';                   /* Indicates that the Change in dropdown                 selected value was due to a Manual Click */              }            }          }                    /*Set new value of edited string into the Editable field */          EditMe.innerText = EditString;          EditMe.value = EditString;          return false;        }      return true;    }   /*-------------------------------------------------------------------------------------------- Subrata Chakrabarty 3.Jan.2003 */</script><script language="JavaScript">/*************** RIGHT TO LEFT FLOW , Fixed Width *************Editable Dropdown in the format:RIGHT Aligned,Fixed Width,RIGHT TO LEFT FLOW (Content flows right to left)* use .innerText instead of .Textadd / includestyle="direction:rtl;"into the SELECT option (in the BODY of your HTML document), i.e.,<SELECT  style="direction:rtl;"... leaving the rest of the parameters as they are.*****************************************/    /*    ---Variables required for     fnChangeHandler_rtl() & fnKeyPressHandler_rtl()     for Editable Dropdowns--     Subrata Chakrabarty 3.Jan.2003     */    var PreviousSelectIndex_rtl = 0;           /* Contains the Previously Selected Index */        var SelectIndex_rtl = 0;                   /* Contains the Currently Selected Index  */        var SelectChange_rtl = 'MANUAL_CLICK';         /* Indicates whether Change in dropdown selected value */                         /* was due to a Manual Click                           *//* or due to System properties of dropdown             */    /*    -----Functions required for  Editable Dropdowns    -- Subrata Chakrabarty 3.Jan.2003     */        function fnChangeHandler_rtl()    {      PreviousSelectIndex_rtl = SelectIndex_rtl;             /* Contains the Previously Selected Index */            SelectIndex_rtl = document.frmName.lstDropDown_rtl.options.selectedIndex;      /* Contains the Currently Selected Index  */            if ((PreviousSelectIndex_rtl == (document.frmName.lstDropDown_rtl.options.length - 1)) && (SelectIndex_rtl != (document.frmName.lstDropDown_rtl.options.length - 1))&&(SelectChange_rtl != 'MANUAL_CLICK'))       /* To Set value of Index variables - Subrata Chakrabarty 3.Jan.2003 */            {        document.frmName.lstDropDown_rtl[(document.frmName.lstDropDown_rtl.options.length - 1)].selected=true;        PreviousSelectIndex_rtl = SelectIndex_rtl;        SelectIndex_rtl = document.frmName.lstDropDown_rtl.options.selectedIndex;                SelectChange_rtl = 'MANUAL_CLICK';                 /* Indicates that the Change in dropdown selected value was due to a Manual Click */      }    }            function fnKeyPressHandler_rtl()    {      if(document.frmName.lstDropDown_rtl.options.length != 0)      /*if dropdown is not empty*/              if (document.frmName.lstDropDown_rtl.options.selectedIndex == (document.frmName.lstDropDown_rtl.options.length - 1))        /*if option the Editable field i.e. the last option */                {          var EditString = EditMe_rtl.innerText;              /* Contents of Editable Option */                    if (EditString == "--?--")                      /* On backspace on default value of Editable option make Editable option Null */                      EditString = "";                      if ((window.event.keyCode==8 || window.event.keyCode==127))           /* To handle backspace - Subrata Chakrabarty 3.Jan.2003 */          {            EditString = EditString.substring(0,EditString.length-1);             /* Decrease length of string by one from right */                        SelectChange_rtl = 'MANUAL_CLICK';                  /* Indicates that the Change in dropdown             selected value was due to a Manual Click */                      }                    /* Check for allowable Characters  */                    /*          The various characters allowable for entry into Editable option..          may be customized by minor modifications in the code (if condition below)          (you need to know the keycode/ASCII value of the  character to be allowed/disallowed.          - Subrata Chakrabarty 3.Jan.2003          */                    if ((window.event.keyCode==46) || (window.event.keyCode>47 && window.event.keyCode<59)||(window.event.keyCode>62 && window.event.keyCode<127) ||(window.event.keyCode==32))           /* To handle addition of a character - Subrata Chakrabarty 3.Jan.2003 */          {            EditString+=String.fromCharCode(window.event.keyCode);            /*Concatenate Enter character to Editable string*/                        /* The following portion handles the "automatic Jump" bug*/            /*            The "automatic Jump" bug (Description):               If a alphabet is entered (while editing)               ...which is contained as a first character in one of the read-only options               ..the focus automatically "jumps" to the read-only option               (-- this is a common property of normal dropdowns                ..but..is undesirable while editing).            */                        var i=0;            var EnteredChar = String.fromCharCode(window.event.keyCode);            var UpperCaseEnteredChar = EnteredChar;            var LowerCaseEnteredChar = EnteredChar;                        if(((window.event.keyCode)>=97)&&((window.event.keyCode)<=122))            /*if EnteredChar lowercase*/                          UpperCaseEnteredChar = String.fromCharCode(window.event.keyCode - 32);               /*This is UpperCase*/                          if(((window.event.keyCode)>=65)&&((window.event.keyCode)<=90))            /*if EnteredChar is UpperCase*/                          LowerCaseEnteredChar = String.fromCharCode(window.event.keyCode + 32);               /*This is lowercase*/                          for (i=0;i<(document.frmName.lstDropDown_rtl.options.length-1);i++)            { var ReadOnlyString = document.frmName.lstDropDown_rtl[i].innerText;              var FirstChar = ReadOnlyString.substring(0,1);              if((FirstChar == UpperCaseEnteredChar)||(FirstChar == LowerCaseEnteredChar))              {                SelectChange_rtl = 'AUTO_SYSTEM';                   /* Indicates that the Change in dropdown                 selected value was due to System properties of dropdown */                                break;              }              else              {                SelectChange_rtl = 'MANUAL_CLICK';                   /* Indicates that the Change in dropdown                 selected value was due to a Manual Click */              }            }          }                    /*Set new value of edited string into the Editable field */          EditMe_rtl.innerText = EditString;          EditMe_rtl.value = EditString;          return false;        }      return true;    }   /*-------------------------------------------------------------------------------------------- Subrata Chakrabarty 3.Jan.2003 */</script><script language="JavaScript">/*********** VARIABLE WIDTH *************Editable Dropdown in the format:Left Aligned,VARIABLE WIDTH, Left To Right Flow* USE the ".text" with ".text" (in the HEAD (SCRIPT) of your HTML document)each & every occurence of .text should be replaced with .text*****************************************/    /*    ---Variables required for     fnChangeHandler_vw() & fnKeyPressHandler_vw()     for Editable Dropdowns--     Subrata Chakrabarty 3.Jan.2003     */    var PreviousSelectIndex_vw = 0;           /* Contains the Previously Selected Index */        var SelectIndex_vw = 0;                   /* Contains the Currently Selected Index  */        var SelectChange_vw = 'MANUAL_CLICK';         /* Indicates whether Change in dropdown selected value */                         /* was due to a Manual Click                           *//* or due to System properties of dropdown             */    /*    -----Functions required for  Editable Dropdowns    -- Subrata Chakrabarty 3.Jan.2003     */        function fnChangeHandler_vw()    {      PreviousSelectIndex_vw = SelectIndex_vw;             /* Contains the Previously Selected Index */            SelectIndex_vw = document.frmName.lstDropDown_vw.options.selectedIndex;      /* Contains the Currently Selected Index  */            if ((PreviousSelectIndex_vw == (document.frmName.lstDropDown_vw.options.length - 1)) && (SelectIndex_vw != (document.frmName.lstDropDown_vw.options.length - 1))&&(SelectChange_vw != 'MANUAL_CLICK'))       /* To Set value of Index variables - Subrata Chakrabarty 3.Jan.2003 */            {        document.frmName.lstDropDown_vw[(document.frmName.lstDropDown_vw.options.length - 1)].selected=true;        PreviousSelectIndex_vw = SelectIndex_vw;        SelectIndex_vw = document.frmName.lstDropDown_vw.options.selectedIndex;                SelectChange_vw = 'MANUAL_CLICK';                 /* Indicates that the Change in dropdown selected value was due to a Manual Click */      }    }            function fnKeyPressHandler_vw()    {      if(document.frmName.lstDropDown_vw.options.length != 0)      /*if dropdown is not empty*/              if (document.frmName.lstDropDown_vw.options.selectedIndex == (document.frmName.lstDropDown_vw.options.length - 1))        /*if option the Editable field i.e. the last option */                {          var EditString = EditMe_vw.text;              /* Contents of Editable Option */                    if (EditString == "--?--")                      /* On backspace on default value of Editable option make Editable option Null */                      EditString = "";                      if ((window.event.keyCode==8 || window.event.keyCode==127))           /* To handle backspace - Subrata Chakrabarty 3.Jan.2003 */          {            EditString = EditString.substring(0,EditString.length-1);             /* Decrease length of string by one from right */                        SelectChange_vw = 'MANUAL_CLICK';                  /* Indicates that the Change in dropdown             selected value was due to a Manual Click */                      }                    /* Check for allowable Characters  */                    /*          The various characters allowable for entry into Editable option..          may be customized by minor modifications in the code (if condition below)          (you need to know the keycode/ASCII value of the  character to be allowed/disallowed.          - Subrata Chakrabarty 3.Jan.2003          */                    if ((window.event.keyCode==46) || (window.event.keyCode>47 && window.event.keyCode<59)||(window.event.keyCode>62 && window.event.keyCode<127) ||(window.event.keyCode==32))           /* To handle addition of a character - Subrata Chakrabarty 3.Jan.2003 */          {            EditString+=String.fromCharCode(window.event.keyCode);            /*Concatenate Enter character to Editable string*/                        /* The following portion handles the "automatic Jump" bug*/            /*            The "automatic Jump" bug (Description):               If a alphabet is entered (while editing)               ...which is contained as a first character in one of the read-only options               ..the focus automatically "jumps" to the read-only option               (-- this is a common property of normal dropdowns                ..but..is undesirable while editing).            */                        var i=0;            var EnteredChar = String.fromCharCode(window.event.keyCode);            var UpperCaseEnteredChar = EnteredChar;            var LowerCaseEnteredChar = EnteredChar;                        if(((window.event.keyCode)>=97)&&((window.event.keyCode)<=122))            /*if EnteredChar lowercase*/                          UpperCaseEnteredChar = String.fromCharCode(window.event.keyCode - 32);               /*This is UpperCase*/                          if(((window.event.keyCode)>=65)&&((window.event.keyCode)<=90))            /*if EnteredChar is UpperCase*/                          LowerCaseEnteredChar = String.fromCharCode(window.event.keyCode + 32);               /*This is lowercase*/                          for (i=0;i<(document.frmName.lstDropDown_vw.options.length-1);i++)            { var ReadOnlyString = document.frmName.lstDropDown_vw[i].text;              var FirstChar = ReadOnlyString.substring(0,1);              if((FirstChar == UpperCaseEnteredChar)||(FirstChar == LowerCaseEnteredChar))              {                SelectChange_vw = 'AUTO_SYSTEM';                   /* Indicates that the Change in dropdown                 selected value was due to System properties of dropdown */                                break;              }              else              {                SelectChange_vw = 'MANUAL_CLICK';                   /* Indicates that the Change in dropdown                 selected value was due to a Manual Click */              }            }          }                    /*Set new value of edited string into the Editable field */          EditMe_vw.text = EditString;          EditMe_vw.value = EditString;          return false;        }      return true;    }   /*-------------------------------------------------------------------------------------------- Subrata Chakrabarty 3.Jan.2003 */</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<table border="1" bordercolor="#99cccc" align="center" width="90%"><tbody><tr bgcolor="black" border="0" height="150"><td valign="top" align="center"><table align="center"><tbody><tr bgcolor="black" border="0"><td valign="top" align="center"><font size="2" color="#ccffff" face="helvetica,arial,geneva"><br><b><i>Left Aligned,<br>Fixed Width,<br>Left To Right Flow<br></i></b></font><hr><br></td></tr><tr bgcolor="black" border="0" height="150"><td valign="top" align="center"><select name="lstDropDown" onkeydown="if(window.event.keyCode == 8 || window.event.keyCode==127){window.event.keyCode = '';return true;}window.event.keyCode = '';return true;" onkeyup="return false" onkeypress="fnKeyPressHandler()" onchange="fnChangeHandler()"><option value="" selected="selected"></option><option>Subrata</option><option>Chakrabarty</option><option>Left Aligned</option><option>Fixed Width</option><option>Left To Right Flow</option><option id="EditMe" name="EditMe" value="" style="color: rgb(255, 0, 0); background-color: rgb(255, 255, 0);">--?--</option></select></td></tr><tr bgcolor="black" border="0"><td valign="top" align="center"><hr><input name="btn1" type="button" value="Alert Edited Value" onclick="alert(EditMe.text);" border="1" style="border-color: rgb(173, 255, 47); border-width: thick; font-weight: bold; font-size: x-small; width: 160px; color: rgb(51, 102, 102); font-style: oblique; font-family: cursive; height: 30px; background-color: gold; font-variant: normal; text-decoration: underline blink;"></td></tr></tbody></table></td><td valign="top" align="center"><table align="center"><tbody><tr bgcolor="black" border="0"><td valign="top" align="center"><font size="2" color="#ccffff" face="helvetica,arial,geneva"><br><b><i>RIGHT Aligned,<br>Fixed Width,<br>RIGHT TO LEFT FLOW <br></i></b></font><hr><br></td></tr><tr bgcolor="black" border="0" height="150"><td valign="top" align="center"><select name="lstDropDown_rtl" style="direction: rtl;" onkeydown="if(window.event.keyCode == 8 || window.event.keyCode==127){window.event.keyCode = '';return true;}window.event.keyCode = '';return true;" onkeyup="return false" onkeypress="fnKeyPressHandler_rtl()" onchange="fnChangeHandler_rtl()"><option value="" selected="selected"></option><option>Subrata</option><option>Chakrabarty</option><option>RIGHT Aligned</option><option>Fixed Width</option><option>RIGHT TO LEFT FLOW</option><option id="EditMe_rtl" name="EditMe_rtl" value="" style="color: rgb(255, 0, 0); background-color: rgb(255, 255, 0);">--?--</option></select></td></tr><tr bgcolor="black" border="0"><td valign="top" align="center"><hr><input name="btn2" type="button" value="Alert Edited Value" onclick="alert(EditMe_rtl.text);" border="1" style="border-color: rgb(173, 255, 47); border-width: thick; font-weight: bold; font-size: x-small; width: 160px; color: rgb(51, 102, 102); font-style: oblique; font-family: cursive; height: 30px; background-color: gold; font-variant: normal; text-decoration: underline blink;"></td></tr></tbody></table></td><td valign="top" align="center"><table align="center"><tbody><tr bgcolor="black" border="0"><td valign="top" align="center"><font size="2" color="#ccffff" face="helvetica,arial,geneva"><br><b><i>Left Aligned,<br>VARIABLE WIDTH,<br>Left To Right Flow<br></i></b></font><hr><br></td></tr><tr bgcolor="black" border="0" height="150"><td valign="top" align="center"><select name="lstDropDown_vw" onkeydown="if(window.event.keyCode == 8 || window.event.keyCode==127){window.event.keyCode = '';return true;}window.event.keyCode = '';return true;" onkeyup="return false" onkeypress="fnKeyPressHandler_vw()" onchange="fnChangeHandler_vw()"><option value="" selected="selected"></option><option>Subrata</option><option>Chakrabarty</option><option>Left Aligned</option><option>VARIABLE WIDTH</option><option>Left To Right Flow</option><option id="EditMe_vw" name="EditMe_vw" value="" style="color: rgb(255, 0, 0); background-color: rgb(255, 255, 0);">--?--</option></select></td></tr><tr bgcolor="black" border="0"><td valign="top" align="center"><hr><input name="btn3" type="button" value="Alert Edited Value" onclick="alert(EditMe_vw.text);" border="1" style="border-color: rgb(173, 255, 47); border-width: thick; font-weight: bold; font-size: x-small; width: 160px; color: rgb(51, 102, 102); font-style: oblique; font-family: cursive; height: 30px; background-color: gold; font-variant: normal; text-decoration: underline blink;"></td></tr></tbody></table></td></tr></tbody></table><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->