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

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

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

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

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

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

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

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

セレクト、段落、ボタンが与えられています。ボタンをクリックしたときに、選択されたリスト項目のテキストを段落に表示してください。

2020年から2030年までの年号のドロップダウンリストを作成してください。リストの項目を選択したときに、その年が閏年かどうかのメッセージを表示してください。