Here we will take care that the options are added on the page load , so by default the list box is pre populated when the page is displayed. You can see the demo at the end of this page. The main function creates a new OPTION object and assigns values and text part of the option. Here is the function which collects the list box name, value and text as inputs and then adds the option to the list box. Here is the function
Note that each time the function is called, it adds a new option to the list box. So we can add one option by calling the function once. Like this.
So this way we can create a drop down list box of all the months by calling the function each time for a month. So with this now you can easily create the list box. But we will add another step to this by using one array of months. So from the array of months we will loop through and add each month to the list box. Here is how to create the array
So now once our array is ready with data, we will loop through the array by using for loop and then call the addOption function using the data of the array. Here is the code.
You can see with this array we will able to populate the drop down list box of months. Here is the simple code for html body tag and the form with drop down list
One option selected by defaultWe can keep one option selected by default while adding option to list box. Here is the syntax for this .
Here i is the variable or number of particular option. To make it clear we will use this in our Listbox demo ( shown above ). We will keep the current month selected while populating the listbox. To get the current month we will use getMonth() function.
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