How to Add Dynamic ComboBox Options in JavaScript
Web pages can present user input elements within forms, capturing user data and sending it to server side scripts. The select and option elements in HTML allow developers to create drop-down list or combo-box items. Using these, the user can select from a set of predefined options. By adding a JavaScript function to your page, you can alter the content of a select element dynamically, as the user interacts with your page. The select and option objects allow you to create and add new choices for your users.
Other People Are Reading
Instructions
-
-
1
Add the select element to your page. Insert the following sample HTML markup between the opening and closing body tags in your Web page:
<select id="selectElement">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="mouse">Mouse</option>
</select>This select element presents three options representing different animals. You can alter the content of the options to suit the data you are trying to capture.
-
2
Add a section for JavaScript within your page. Between the opening and closing head tags in your file, add the following outline code:
<script type="text/javascript">
//functions here
</script>You can add any JavaScript functions in this section and your page elements will be able to call them on user interaction or any other event. You can also include your JavaScript in a separate file and add a link to it in your page head, as an alternative.
-
-
3
Add a function to process your select option alteration. Insert the following function outline between the opening and closing script tags in your page head section:
function addOption() {
//implement adding an option
}Inside this function, you can add the code to dynamically alter the content of your select element. You can set the page up to call this function on an event that suits the functionality of your page.
-
4
Implement your dynamic select addition operation. Inside your JavaScript function, as the following code to gain a reference to the select element in your page:
var selectElem = document.getElementById("selectElement");
You can alternatively pass the select element ID attribute as a parameter if this suits your page. This code stores a reference to the element in a variable. Insert the following code to add a new option to the select element:
selectElem.add(new Option("Chicken", "chicken"), null);
This code creates a new option object; then adds it to the select element by passing it as a parameter to the add function. The code creating the new option object passes the content and value of the option to appear within the page, so alter it to suit your own needs.
-
5
Call your JavaScript function. You can execute the function on user interaction with the other elements in your page, but for demonstration you can alter the opening body tag as follows:
<body onload="addOption()">
This will call the function as soon as the user's browser loads the page. Save your HTML file and open it in a browser. Click the select element to see its contents. You should see the new option your code added along with the original options outlined in the HTML.
-
1
Tips & Warnings
You can also alter properties of select elements dynamically, such as style.
JavaScript can be unpredictable in certain browsers, so test your pages well.
References
Resources
- Photo Credit Erik Snyder/Lifesize/Getty Images
