How to Update the Select Box With JavaScript

JavaScript allows you to set up a "select" box, which is the drop-down form element used to collect input from users. You can update and add a new value for users. This type of JavaScript feature is typically used when you add values to a select box based on previous selections from your reader.

Instructions

1. Right-click the HTML file that contains your select box. Select "Open With," then double-click your preferred HTML editor in the program list.

2. Type the following code in the body of the HTML:

   <script type="text/javascript> </script>

   Place all of your JavaScript code within these two HTML tags.

3. Type the following code to update the list of options in the drop-down select box:

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

   optn.text = "My New Value";

   optn.value = "Value";

   selectbox.options.add(new_item);

   Replace "selectbox" with the HTML ID for your drop-down select box. The second and third lines of code identify the value and text displayed in the drop-down box.

4. Save the code in the editor and open the HTML page in a Web browser. Notice the new item updates on the select box.

References

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