JavaScriptでのドロップダウンリストの操作

このレッスンでは、 ドロップダウンリストを表す タグselectの操作について学びます。 HTMLでこのタグの使い方を知らない場合は、 まず以下のリンクのリファレンスでその構造を学んでください： select。

では、JavaScriptを通じてこのタグを 操作する方法を見てみましょう。 以下のようなドロップダウンリストがあるとします：

html<select id="select">
  <option>one</option>
  <option selected>two</option>
  <option>three</option>
</select>

変数にselect要素への参照を取得しましょう：

javascriptlet select = document.querySelector('#select');

次に、セレクトが変更されたときに 選択されたリスト項目のテキストを 画面に表示してみましょう。 そのためには、セレクトのvalueプロパティを 読み取る必要があります：

javascriptselect.addEventListener('change', function(){
  console.log(this.value);
});