JavaScriptでのリスト選択項目の変更

前のレッスンでは、リストの選択された項目を取得する方法を学びました。では今度は、JavaScriptを使用して選択項目を変更してみましょう。

これを行うには、selectのプロパティvalueに、選択したいoptionのvalue属性の値を設定します。

次のようなセレクトボックスがあるとします：

<select id="select">
	<option value="one">一</option>
	<option value="two" selected>二</option>
	<option value="three">三</option>
</select>

また、ボタンもあるとします：

<input type="submit" id="button">

セレクトボックスとボタンへの参照を変数に取得します：

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

では、ボタンがクリックされたときにセレクトボックスの選択が変わるようにしましょう：

button.addEventListener('click', function() {
	select.value = 'one';
});

リストのオプションにvalue属性がない場合、セレクトボックスのvalueプロパティには、選択したいoptionタグのテキストを設定する必要があります。

月の名前を含むドロップダウンリストを作成してください。 JavaScriptがデフォルトでこのリストから現在の月を選択するようにしてください。