« »

The Editable Dropdown can be customized to the following formats:

a) Editable Dropdown in the format: Left Aligned, Fixed Width, Left To Right Flow
b) Editable Dropdown in the format: RIGHT Aligned, Fixed Width, RIGHT TO LEFT FLOW (Content flows right to left)
c) Editable Dropdown in the format: Left Aligned, VARIABLE WIDTH, Left To Right Flow 4. Does not tolerate the famous 'Backspace' bug or 'automatic Jump' bug.

Label: Editable Drop down

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
CSS
JavaScript
HTML
Print

Copy All x2

<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
	-->

Copy All x2

<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 .Text			

	add / include

			style="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
	-->

Copy All x2

<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
	-->

Comment (0)
Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Cool Domains for Sale!

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Subrata Chakrabarty [more]
2,047
0
0
0
42.73 KBytes

JavaScript Editable Drop down

0/5 0 votes / 2,047 previews / 0 comment 30/01/2007 The Editable Dropdown can be customized to the following formats: a) Editable Dropdown in the format: Left Aligned, Fi...JavaScript Editable Drop down - Editable Drop down

Canhtho ttv1

Let's be first member to do this