Removing options from a List Box in client side Javascript

We can remove the options from a list box by using client side JavaScript. You can see the article explaining how to add options to a list box using JavaScript. Here we will discuss on how to remove option on selection and removing all the options in one go. We will use different functions and connect them to buttons to execute them. Here are some functions and there uses in removing the options. You can see the demo of this program here.

While the page loads we will try to populate the list box by using onload event of the body tag. The list box will be filled with data at the time of display to the visitors. The detail on how to add options to list box you can get here. So we will go to the next step

Removing all the options
To remove all the options from the list box we will loop through all the elements of the list box and remove one by one. We will use for loop to loop from 0 to selectbox.options.length-1. The total length ( or the number of elements ) of the array we can get by using selectbox.options.length and to this we are subtracting 1 as the first elements starts from 0 ( not from 1 ). Here is the function

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

The for loop will remove all the elements with the value of i changing from last element of the array to first element of the array.

Removing Selected Options

We can remove the options one by one or by selecting more than one option and then by pressing the button. Here also we will use the similar function like above but before deleting we will check if the option is checked or not. selectbox.options[i].selected will return true if the option is selected. This way we will check all the elements of the list box and if they are checked then we will add the command selectbox.options.remove(i); to remove that particular option from the list box. Here is the function.

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

Adding the options

There is a full tutorial on adding the options to list box. So here is the function.

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");

}

Now we will see how the select box with the form and buttons are placed in the body are of the page. Each button is connected to one function with on click event handler. See here

<FORM name="drop_list" action="yourpage.php" method="POST" >

<SELECT id="SubCat" NAME="SubCat" MULTIPLE size=6 width=10>
</SELECT><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>

Here is the demo of the script

Disabling the submit button till all the elements of the form are validated

getElementById to access form elements with event handlers

Javascript Form Validation

Period button Validation of a form

How to limit number of checkboxes allowed to be clicked inside a form

Checkbox Validation of a form

Displaying checked value of a check box array

Enable or disable of a text box by a checkbox

All Checking & Un checking in a group of checkboxes by single button

Adding options to a drop down list box

Removing options from a drop down list box

Moving options from one drop down list box to other

Dynamic population of second list box based on value of first list box

ashutosh	02-03-2010
Thanks a lot. code is working fine in IE but not working with MOZILA. Please help me.
smo	02-03-2010
Check the demo link, it is working fine in FireFox, Chrome & IE

Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email	( not to be displayed)Privacy Policy
1+2=	This is to prevent automatic submission by spammers. Please enter the result of the sum as asked

Sections

Listbox

ListBox Adding option Moving Options Removing Options Dependant list box list box with Data

Form validation

Period button Checkbox ListBox

Subscribe

Submit your email address and receive article and product notifications. Your email is safe with us.

Removing options from a List Box in client side Javascript

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

Removing Selected Options

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

Adding the options

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

function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;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);
}
}

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