1. <html>
  2. <head>
  3. <style type="text/css">
  4. .style1 {
  5. 	margin-left: 40px;
  6. }
  7. </style>
  8.  
  9. <script type="text/javascript">
  10.  
  11. function removeItem()
  12. {
  13. 	var a = document.getElementById('lstName');
  14.   	for(i=a.length-1;i>=0;i--)
  15.   	{
  16.     	if (a.options[i].selected)
  17.     	{
  18.       		a.remove(i);
  19.     	}
  20.   	}
  21. }
  22.  
  23. function addItem()
  24. {
  25. 	a = document.getElementById('txtName');
  26. 	if(a.value.length>0 && a.value.length<=15)
  27. 	{
  28. 		var b = document.getElementById('lstName');
  29.     	var c = document.createElement('option');
  30.     	c.innerHTML=a.value; 
  31.       	b.add(c,b.options[0]); // Adds the item at the top of the list.
  32.    	}
  33. 	else
  34. 	{
  35. 		alert("Cannot add, Length has to be under 15 char");
  36. 		a.value="";
  37. 		a.focus();
  38. 	}
  39. }
  40. </script>
  41.  
  42. </head>
  43. <body>
  44. <p class="style1">Please a name into the text field.
  45.  
  46. Then click the "Add to List" button when complete.
  47.  
  48.  
  49. </p>
  50.  
  51.  
  52. <form name="txtname">
  53.  
  54. Name:
  55. <input type="text" id="txtName">
  56. <br><br>
  57. Name List:
  58. <select id="lstName" size="5" style="width: 189px">
  59. </select>
  60. <br><br>
  61. <input type="button" value="Add to List" onclick="javascript: addItem();">&nbsp;
  62. <input type="button" value="Remove Selected" onclick="javascript: removeItem();"></form>
  63. </body>
  64. </html>