Select要素 (プルダウンメニューとリストボックス)

<select>タグの選択が変更されると、onchangeイベントが発生します。

選択されている項目を取得する場合、<select>のmultiple属性によって複数項目の選択が許可されているか否かによって処理が異なります。

multiple属性の設定をJavaScriptから取得するには、Selectオブジェクトのtypeプロパティを参照します。multipleが設定されているならば「select-multiple」が、さもなくば「select-one」が文字列で返されます。

サンプルコード

<select id="listbox" size="5">
  <option value="first">項目1</option>
  <option value="second">項目2</option>
  <option value="third">項目3</option>
</select>

<script type="text/javascript">
  var select = document.getElementById( 'listbox' );
  select.onchange = function()
  {
    var selectedItem = this.options[ this.selectedIndex ];
    alert( selectedItem.value );
  }
</script>

サンプル

選択された項目のvalue属性を表示します。

選択されている項目：

プルダウンメニューのonchangeイベント

ブラウザによってSelect要素がプルダウンメニューのときは、キーボードから選択を変更してもonchangeイベントが発生しないことがあります。

onchange：
onkeydown：

参照

関連ページ