<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>option creation</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> /*<![CDATA[*/ body { background-color: #ddd; } #container { 400px; text-align: center; padding: 20px 0px; border: 3px double #000; background-color: #ccc; margin: 30px auto; } /*//]]>*/ </style> <script type="text/javascript"> //<![CDATA[ var opts=3 /*number of original options*/ var df=document.forms; function optionAdd(num) { opts=opts+num; df[0][0].options.length=opts; df[0][0].options[opts-1].innerHTML=df[0][1].value; df[0][1].value="" } //]]> </script> </head> <body> <form action="#"> <div id="container"> <select> <option>- - - - - - - -</option> <option>option one</option> <option>option two</option> </select> <input type="text" /> <input type="button" value="new option" onclick="optionAdd(1)" /> </div> </form> </body> </html>