Demo of removing options from a drop down listbox.

Hold the Ctrl key for multiple selections

Back To Tutorial on removing options | ListBox | JavaScript

JavaScript

<script language="javascript" >

function addOption(selectbox,text,value )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;
	selectbox.options.add(optn);
}


function addOption_list(selectbox){
addOption(document.drop_list.SubCat, "One","One");
addOption(document.drop_list.SubCat, "Two","Two");
addOption(document.drop_list.SubCat, "Three","Three");
addOption(document.drop_list.SubCat, "Four","Four");
addOption(document.drop_list.SubCat, "Five","Five");
addOption(document.drop_list.SubCat, "Six","Six");

}


function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}

function removeOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
	if(selectbox.options[i].selected)
	selectbox.remove(i);
	}
}

</script>

HTML

<FORM name="drop_list" action="yourpage.php" method="POST" >
<SELECT id="SubCat" NAME="SubCat" MULTIPLE size=6 width=30px>
</SELECT><br><br>
<input type=button onClick="removeOptions(SubCat)"; value='Remove Selected'>
<input type=button onClick="removeAllOptions(SubCat)"; value='Remove All'>
<input type=button onClick="addOption_list()"; value='Add All'> 
</form>