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 optionsTo 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
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 OptionsWe 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.
There is a full tutorial on adding the options to list box. So here is the function.
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
Number of User Comments : 8
ListBox Validation : Checking if option is selected before submitting a form
ListBox Disable: using disabled property we can disable a listbox by radio button
Adding option: Adding options to a listbox dynamically
Moving Options Moving Options from a listbox to other
Removing Options: Removing options from a listbox
Copying List data : Copying user entered data from one to other form
Dependant list box : Linking two dropdown listboxes
list box with Data : Populating Listbox by taking data from MySQL table
Listbox Menu: Redirecting page based on selection of listbox