Dynamically populate select option

On this page we provide JavaScript that replaces the options in a select box based on user selection in an another select box. The example form below demonstrates. Try it by making a selection in the first select box, and you will see that the options in the second change. The JavaScript provided here can be applied to multiple sets of paired select boxes.

Options can be contained in optgroups.

The select box on the left is referred to as the controlling select box since the selection made there will control the options in the select box on the right, which is referred to as the associated select box. The associated select box can be populated with option elements using JavaScript as the page loads.

The option values in the controlling select box, highlighted above, are used in the object literal that holds the data for the associated select box. The text and values for the associated select box options are contained in an object literal.

The outermost object matches the name of the associated select box. The next level matches the values in the controlling select box. If your select box is to contain optgroups, the next level uses their labels for names. The example in the download file demonstrates this. The innermost level contains the text, and optionally, value arrays for your option text and value attributes. To support additional sets of paired select boxes, supply additional objects matching the same pattern as displayed above for choices.

How to populate the options of a select element in javascript - Stack Overflow

The two functions needed for paired select boxes, appendDataToSelect and removeAllOptions are displayed here:. An anonymous function is assigned to the onchange event of the controlling select box. JavaScript is used to initially populate the associated select box based on the default selection in the controlling select box. Code comments provide further details.

Dynamic Web Coding Tutorials JavaScript PHP Site Map. Replace Options Onchange On this page we provide JavaScript that replaces the options in a select box based on user selection in an another select box.

Dynamic Select Box JavaScripts PHP Scripts Tutorials The JavaScript provided here can be applied to multiple sets of paired select boxes.

Form Markup The select box on the left is referred to as the controlling select box since the selection made there will control the options in the select box on the right, which is referred to as the associated select box.

Dynamically Populate Select Field - Toolset

The following HTML markup generates the above form: See the tutorial on Object Literals if you are unfamiliar with the syntax. More JavaScript and Forms Forms Tutorial Overview Obtaining References Forms and Event Handling JavaScript and Radio Buttons JavaScript and Checkboxes Download Examples.

Like dyn-web site speed? Hosted by Digital Ocean!