<html>
<head>
<style type="text/css">
.style1 {
margin-left: 40px;
}
</style>
<script type="text/javascript">
function removeItem()
{
var a = document.getElementById('lstName');
for(i=a.length-1;i>=0;i--)
{
if (a.options[i].selected)
{
a.remove(i);
}
}
}
function addItem()
{
a = document.getElementById('txtName');
if(a.value.length>0 && a.value.length<=15)
{
var b = document.getElementById('lstName');
var c = document.createElement('option');
c.innerHTML=a.value;
b.add(c,b.options[0]); // Adds the item at the top of the list.
}
else
{
alert("Cannot add, Length has to be under 15 char");
a.value="";
a.focus();
}
}
</script>
</head>
<body>
<p class="style1">Please a name into the text field.
Then click the "Add to List" button when complete.
</p>
<form name="txtname">
Name:
<input type="text" id="txtName">
<br><br>
Name List:
<select id="lstName" size="5" style="width: 189px">
</select>
<br><br>
<input type="button" value="Add to List" onclick="javascript: addItem();">
<input type="button" value="Remove Selected" onclick="javascript: removeItem();"></form>
</body>
</html>