<html>
<head>
<title>Add/Remove option to Select Box Multiple</title>
<script type="text/javascript">
function addRows()
{
var displayname = document.getElementById('displayname').value;
var optionvalue = document.getElementById('optionvalue').value;
if(displayname!="" && optionvalue!="")
{
var option = document.createElement("option");
option.text = displayname;
option.value = optionvalue;
var select = document.getElementById("selectmultiple");
select.appendChild(option);
document.getElementById('displayname').value = "";
document.getElementById('optionvalue').value = "";
}
else
{
if(displayname=="")
alert("Enter Value to display");
if(optionvalue=="")
alert("Enter Value to option");
}
}
function removeRows()
{
var x = document.getElementById("selectmultiple");
x.remove(x.selectedIndex);
}
</script>
</head>
<body>
<h1>Add/Remove option to Select Box Multiple</h1>
<div>
<div style='padding-left:15px; float:left; width:20%;'>
<input type="text" id="displayname" name="displayname" placeholder="Value To Display" /><br />
<input type="text" id="optionvalue" name="optionvalue" placeholder="Value To Option" />
</div>
<div style="float:left; width:10%;">
<input type="button" value="Add >>" class="green_button" onClick="addRows()" /><br /><br />
<input type="button" value="<< Remove" class="red_button" onClick="removeRows()" />
</div>
<div class="element_content" style='float:left; width:25%;'>
<select id='selectmultiple' name='selectmultiple' size="0" style="width:90%; height:auto;" multiple ></select>
</div>
</div>
</body>
</html>
