Skip to content

テクニック SCR19:select 要素の onchange イベントは、コンテキストの変化を引き起こすことのないように使用する

このテクニックについて

このテクニックは、次に関連する:

このテクニックは、スクリプトをサポートする HTML に適用される。

解説

このテクニックの目的は、ウェブページの他の要素を更新する select 要素において onchange イベントを正しく使用する方法を示すことである。この達成方法は、コンテキストの変化を引き起こさない。ウェブページに一つかそれ以上の select 要素があるとき、一方の onchange イベントは、そのウェブページの別の select 要素における選択肢を更新できる。そして、select 要素によって必要とされるデータのすべてが、ウェブページの中に含まれている。

ウェブページでの音声読み上げ順序において、選択によって変更されるアイテムが、トリガーとなる select 要素の後にあることに注意することが重要である。これは、支援技術が変化を察知するのを確実にし、変更されたアイテムがフォーカスされたとき、利用者は新しいデータを認識する。なお、この達成方法は、ユーザエージェントによる JavaScript のサポート状況に依存する。

事例

事例 1

この事例には、二つの select 要素がある。最初の select 要素でアイテムが選択されたとき、二つめの select 要素の選択肢が適切に更新される。最初の select 要素には、大陸のリストがある。そして、二つめの select 要素には、選択された大陸に位置する国々の一部のリストがある。onchange イベントは、大陸の選択に連動している。大陸の選択が変わると、国の選択肢は、ドキュメントオブジェクトモデル (DOM) を通して JavaScript を用いて変更される。必要であるすべてのデータ、国と大陸のリスト、はウェブページの中に含まれている。

以下のコードの概要

  • トリガーとなる select 要素の大陸ごとの国々のリストを含む countryLists 配列
  • 大陸の select 要素の onchange イベントによって呼ばれる countryChange() 関数
  • ウェブページの本文の select 要素を作成する HTML コード
<!doctype html> 
<html lang="en"> 
  <head> 
    <meta charset=utf-8"> 
    <title>Dynamic Select Statements</title> 
    <script>
    // array of possible countries in the same order as they appear
    // in the country selection list 
    var countryLists = new Array(4) 
    countryLists["empty"] = ["Select a Country"]; 
    countryLists["North America"] = ["Canada", "United States", "Mexico"]; 
    countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"]; 
    countryLists["Asia"] = ["Russia", "China", "Japan"]; 
    countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"]; 
  
    /* CountryChange() is called from the onchange event of a select element. 
     * param selectObj - the select object which fired the on change event. 
    */ 
  
    function countryChange(selectObj) { 
    // get the index of the selected option 
    var idx = selectObj.selectedIndex; 
  
    // get the value of the selected option 
    var which = selectObj.options[idx].value; 
  
    // use the selected option value to retrieve the list of items 
    // from the countryLists array 
    cList = countryLists[which]; 
  
    // get the country select element via its known id 
    var cSelect = document.getElementById("country"); 
  
    // remove the current options from the country select 
    var len=cSelect.options.length; 
  
    while (cSelect.options.length > 0) { 
      cSelect.remove(0); 
    } 
  
    var newOption; 
    // create new options 
    for (var i=0; i<cList.length; i++) { 
      newOption = document.createElement("option"); 
      newOption.value = cList[i];  // assumes option string and value are the same 
      newOption.text=cList[i]; 
  
   // add the new option 
    try { 
      cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
    } 
    catch (e) { 
      cSelect.appendChild(newOption); 
    } 
  } 
} 
  </script>
</head>
<body>
  <h1>Dynamic Select Statements</h1>
  <label for="continent">Select Continent</label>
  <select id="continent" onchange="countryChange(this);">
    <option value="empty">Select a Continent</option>
    <option value="North America">North America</option>
    <option value="South America">South America</option>
    <option value="Asia">Asia</option>
    <option value="Europe">Europe</option>
  </select>
  <div>
    <label for="country">Select a country</label>
    <select id="country">
      <option value="0">Select a country</option>
    </select>
  </div>
</body>
</html>

動作例: Dynamic Select

関連リソース

推奨を意味するものではない。

検証

手順

  1. トリガーとなる select 要素 (この事例では、大陸を選択するセレクトメニュー) に移動し、選択肢の値を変える。
  2. トリガーによって更新された select 要素 (この事例では、国を選択するセレクトメニュー) へ移動する。
  3. 一致する選択肢の値が、他の select 要素に表示されていることをチェックする。
  4. トリガーとなる select 要素へ移動し、選択肢へ移動するが、値を変えない。
  5. 一致する選択肢の値が、関連付けられた要素にまだ表示されていることをチェックする。

関連付けられた要素の変化が認識されることを確かめるために、select 要素を支援技術を用いて検証することが望ましい。

期待される結果

  • 手順 3 及び 5 が真である。
Back to Top