This technique relates to:
The objective of this technique is to demonstrate how to correctly use an onchange event with a select element to 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.
Overview of the code below
- countryLists array variable which contains the list of countries for each continent in the trigger select element.
- countryChange() function which is called by the onchange event of the continent select element.
- The XHTML code to create the select elements in the body of the Web page.
Here is a working example: Dynamic Select
Resources are for information purposes only, no endorsement implied.
- Navigate to the trigger select element (in this example, the one to select continents) and change the value of the select.
- Navigate to the select element that is updated by the trigger (in this example, the one to select countries).
- Check that the matching option values are displayed in the other select element.
- Navigate to the trigger select element, navigate through the options but do not change the value.
- Check that the matching option values are still displayed in the associated element.
It is recommended that the select elements are tested with an assistive technology to verify that the changes to the associated element are recognized.
- Step #3 and #5 are true.