Hi, You can check this Code: <font color='darkslategray'> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>untitled</title> <style type="text/css"> body { padding: 100px; background: url(http://www.sitepoint.com/forums/images/editor/code.gif); } #animals, option { font: normal 12px "comic sans ms", sans-serif; color: #000; background: buttonface; } span { padding: 12px; background: white; } </style> <script type="text/javascript"> function addOption(s) { var usr = 'option'; if (s.value == 'other') { var o_new, o_old; var bullet = '• '; while (usr == '' || usr == 'option') usr = prompt('Enter a new animal...', 'option'); if (null != usr) { var pos = s.selectedIndex; o_old = s.options[s.options.length - 2]; o_new = document.createElement('option'); o_new.setAttribute('value', usr); o_new.appendChild(document.createTextNode (bullet + usr<font color='red'>.toUpperCase()</font>)); //remove red to maintain case s.insertBefore(o_new, o_old); s.selectedIndex = --pos; return true; } } if (!usr || s.value == 'spacer') { s.selectedIndex = 0; return false; } } </script> </head> <body> <form> <span> <select id="animals" name="animals" onchange="return addOption(this)"> <option value="" selected="selected">» animals</option> <option value="spacer"></option> <option value="aardvark">• AARDVARK</option> <option value="bullmoose">• BULL MOOSE</option> <option value="catamount">• CATAMOUNT</option> <option value="dachsund">• DACHSUND</option> <option value="dachsund">• ELEPHANT</option> <option value="spacer"></option> <option value="other">» add animal</option> </select> </span> </form> </body> </html> </font> Thanks
