Description The objective of this technique is to demonstrate how to correctly use an onchange event with a select element option value function update other elements on the Web page. This technique will not cause a change of context. When there are one or more select elements on the Web page, an onchange event on one, can update the options in another select element on the Web page.
All of the data required by the select elements is included within the Web page. It is important to note that the select item which is modified is after the trigger select element in the reading order of the Web page.
This ensures that assistive technologies will pick up the change and users will encounter the new data when the modified element receives focus.
Examples Example 1 This example contains two select elements. When an item is selected in the first select, the choices in the other select are updated appropriately.
The first select element contains a list of continents. The second select element will contain a partial list of countries located in the selected continent.
There is an onchange event associated with the continent select. All of the data required, the list of countries and continents, is included within the Web page.
Overview of the code below countryLists array variable which contains the list of countries for each continent in the trigger select element.