Option value function, columns.searchPanes.options

Insert/edit link

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.

option value function

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.

option value function

This ensures that assistive technologies will pick up the change and users will encounter the new data when the modified element receives focus.

This technique relies on JavaScript support in the user agent.

option value function

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.

option value function

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.

Navigation menu

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.

option value function

Overview of the code below countryLists array variable which contains the list of countries for each continent in the trigger select element.

See also