セレクトボックス、ドロップダウンリストボックス（コンボボックス）の選択要素を変更したタイミングで処理を実行する

JavaScriptでセレクトボックス、ドロップダウンリストボックス（コンボボックス）の選択要素を変更したタイミングで処理を実行するコードを紹介します。

概要

ドロップダウンリストボックスやセレクトボックス(コンボボックス)の選択要素が変更されたタイミングでコードを実行する場合は、セレクトボックスを表す、selectタグの onchange 属性を利用します。 onchange属性の値の中に実行するJavaScriptのコードか、イベントハンドラとなる関数の呼び出しを記述します。

書式

<select id="(セレクトボックスのID)" onchange="(選択変更時に実行するJavaScriptのコード)">
  <option>(選択項目1)</option>
  <option>(選択項目2)</option>
  /* 中略 */
  <option>(選択項目n)</option>
</select>

プログラム例

コード

下記のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" language="javascript">
    function selectboxChange() {
      target = document.getElementById("output");

      selindex = document.form1.Select1.selectedIndex;
      switch (selindex) {
        case 1:
          target.innerHTML = "要素1が選択されています。<br/>";
          break;
        case 2:
          target.innerHTML = "要素2が選択されています。<br/>";
          break;
        case 3:
          target.innerHTML = "要素3が選択されています。<br/>";
          break;
        case 4:
          target.innerHTML = "要素4が選択されています。<br/>";
          break;
        case 5:
          target.innerHTML = "要素5が選択されています。<br/>";
          break;
      }
    }
  </script>
</head>
<body>
  <form name="form1" action="">
    <select id="Select1" onchange="selectboxChange();">
      <option>---</option>
      <option>要素1</option>
      <option>要素2</option>
      <option>要素3</option>
      <option>要素4</option>
      <option>要素5</option>
    </select>
  </form>
  <div id="output"></div>
</body>
</html>

解説

<select id="Select1" onchange="selectboxChange();">

のコードにより、セレクトボックス(コンボボックス)の選択要素が変更された場合に SelectboxChange()関数を呼び出す動作となっています。

SelectboxChange()関数では、document.form1.Select1.selectedIndex プロパティにアクセスし、セレクトボックスの選択項目のインデックスを取得します。インデックスの取得後、switch文で選択されている項目のインデックス応じたメッセージを "output" idを持つタグの要素に表示します。

  function selectboxChange() {
    target = document.getElementById("output");

    selindex = document.form1.Select1.selectedIndex;
    switch (selindex) {
      case 1:
        target.innerHTML = "要素1が選択されています。<br/>";
        break;
      case 2:
        target.innerHTML = "要素2が選択されています。<br/>";
        break;
      case 3:
        target.innerHTML = "要素3が選択されています。<br/>";
        break;
      case 4:
        target.innerHTML = "要素4が選択されています。<br/>";
        break;
      case 5:
        target.innerHTML = "要素5が選択されています。<br/>";
        break;
    }
  }

コンボボックスの選択項目を変更すると、選択項目が選択されている旨のメッセージがコンボボックス下部の枠に表示される動作となります。