How to Add Items to a List Box Using JavaScript

JavaScript is client-side code, so you use the language to dynamically change HTML controls after the page loads on the browser. You can dynamically remove and add drop-down list elements, so you can remove or add options in the user's selection results. You use the "options.add" function to add a list option to an HTML list box.

Instructions

1. Right-click the HTML file you want to edit, and select "Open With." Double-click an editor in the list of programs to open the code.

2. Create the JavaScript function. The following code creates a JavaScript function that adds an item to a list box:

   function addlistitem(control,value)

   {

   var option = document.createElement("OPTION");

   option.text = value;

   selectbox.options.add(option);

   }

3. Add the "addlistitem" to the list box tag code. The following code uses the function created in step two to add an item:

   onclick="addlistitem(this, "new value")"

   The code above adds an item when the user clicks on the list box. The item added is "new value."

References

• Plus 2 Net: Adding Options to List Box in Client Side Javascript