Home » Javascript13 March 2017

Javascript: Populate Select box OnChange with JS array/object

This article show how to populate one select box by selecting option of another select box/list. We will use a Javascript object. Each key of the object contains array as value.

A first select box is populated with the Javascript object’s keys. Then when the value from the first select box is selected then based on that value, the second select box is populated.

The below JS object contains names of zones and districts. There are different districts in a single zone. So, in the below JS object, each zone is the key of the object and the district array is the value of the zones.

populateZone() function is called on window load. This function populates the first select box using the keys of zoneDistrict object.

populateDistrict(zone) function is called when any value of the first select box is selected. The name of the zone is passed to the function. Based on the zone name passed, the district array value is selected from zoneDistrict object and the second select box is populated.

Here is the full code:

Hope this helps. Thanks.


Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed