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

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

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

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

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

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

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

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

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

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

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