スクリプトをサポートするHTML及びXHTML。この実装方法では、JavaScript 1.4 の try/catch 構文を用いる。
これは、次の達成基準に関連する実装方法である：
この実装方法は、Firefox1.5とIE6の両方で、JAWS 7.0とWindowEyes 5.5を使用したWindows XPで検証されている。ブラウザでJavaScriptを有効にしなければならないことに注意する。
この実装方法の目的は、ウェブページの他の要素を更新するselect要素においてonchangeイベントを正しく使用する方法を示すことである。この実装方法は、状況の変化を引き起こさない。ウェブページに一つかそれ以上のselect要素があるとき、一方のonchangeイベントは、そのウェブページの別のselect要素における選択肢を更新できる。そして、select要素によって必要とされるデータのすべてが、ウェブページの中に含まれている。
ウェブページでの音声読み上げ順序において、選択によって変更されるアイテムが、トリガーとなるselect要素の後にあることに注意することが重要である。これは、支援技術が変化を察知するのを確実にし、変更されたアイテムがフォーカスされたとき、利用者は新しいデータを認識する。なお、この実装方法は、ユーザーエージェントによるJavaScriptのサポート状況に依存する。
この事例には、2つのselect要素がある。最初のselect要素でアイテムが選択されたとき、二つめのselect要素の選択肢が適切に更新される。最初のselect要素には、大陸のリストがある。そして、二つめのselect要素には、選択された大陸に位置する国々の一部のリストがある。onchangeイベントは、大陸の選択に連動している。大陸の選択が変わると、国の選択肢は、ドキュメント・オブジェクト・モデル(DOM)を通してJavaScriptを用いて変更される。必要であるすべてのデータ、国と大陸のリスト、はウェブページの中に含まれている。
以下のコードの概要：
トリガーとなるselect要素の大陸ごとの国々のリストを含むcountryLists配列
大陸のselect要素のonchangeイベントによって呼ばれるcountryChange() 関数
ウェブページの本文のselect要素を作成するXHTMLコード
コード例：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
<title>動的なセレクトメニュー</title>
<script type="text/javascript">
//<![CDATA[
// 国の選択項目のリストに現れるのと同じ順の選択可能な国の配列
var countryLists = new Array(4)
countryLists["empty"] = ["国を選択してください"];
countryLists["North America"] = ["カナダ", "アメリカ合衆国", "メキシコ"];
countryLists["South America"] = ["ブラジル", "アルゼンチン", "チリ", "エクアドル"];
countryLists["Asia"] = ["ロシア", "中国", "日本"];
countryLists["Europe"]= ["イギリス", "フランス", "スペイン", "ドイツ"];
/* CountryChange() はselect要素のonchangeイベントから呼び出される。
* param selectObj - onchangeイベントで生成されるselectオブジェクト。
*/
function countryChange(selectObj) {
// 選択された選択肢のインデックスを得る
var idx = selectObj.selectedIndex;
// 選択された選択肢の値を得る
var which = selectObj.options[idx].value;
// countryLists 配列から項目のリストを検索するために選択された選択肢の値を使う
cList = countryLists[which];
// そのIDを通して国のselect要素を得る
var cSelect = document.getElementById("country");
// 国のリストから現在の選択肢を削除する
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// 新しい選択肢を生成する
for (var i=0; i<cList.length; i++) {
newOption = document.createElement("option");
newOption.value = cList[i]; // 選択肢の文字列と値は同じとする
newOption.text=cList[i];
// 新しい選択肢を追加する
try {
cSelect.add(newOption); // これはDOMをサポートするブラウザでは失敗するが、IEには必要
}
catch (e) {
cSelect.appendChild(newOption);
}
}
}
//]]>
</script>
</head>
<body>
<noscript>このページはJavaScriptが有効で、関数が正しく動作可能である必要があります。</noscript>
<h1>動的なセレクトメニュー</h1>
<label for="continent">大陸を選択</label>
<select id="continent" onchange="countryChange(this);">
<option value="empty">大陸を選択してください</option>
<option value="North America">北米</option>
<option value="South America">南米</option>
<option value="Asia">アジア</option>
<option value="Europe">ヨーロッパ</option>
</select>
<br/>
<label for="country">国を選択</label>
<select id="country">
<option value="0">国を選択してください</option>
</select>
</body>
</html>このコードの実装サンプル：動的なセレクトメニュー
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
（今のところ、なし。）
トリガーとなるselect要素(この事例では、大陸を選択するセレクトメニュー)で、選択肢の値を変える。
トリガーによって更新されたselect要素(この事例では、国を選択するセレクトメニュー)へ移動する。
適切な選択肢の値が、2. のselect要素に表示されている。
選択肢の値を変えることなく、1. のトリガーとなるselect要素へ移動する。
適切な選択肢の値が、関連付けられた要素（2. のselect要素）にまだ表示されている。
関連付けられた要素（2. のselect要素）の変化が認識されることを確かめるために、select要素を支援技術を用いて検証することが望ましい。
3. 及び 5. を満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。