select要素のoptionを操作するときのJavaScript

たまに使うと忘れているので自分用メモ。

選択されているoption要素のvalueではなく要素自体（テキスト）を取得

手順

直接optionを指定することはできないので、まず選択されているoptionのインデックスを取得。次に、option[インデックス]のtextを取得。という流れ。

const select = document.querySelector('select'),
  // optionを全て取得
  options = select.querySelectorAll('option'),
  // 選択中optionのインデックスを取得
  index = select.selectedIndex,
  // インデックスからoptionを取得
  selected_option = options[index].text

optionのテキストではなくvalueを取得

選択中のoptionなら素直にselect.valueで良い。

任意のoptionなら、先ほどの要領でインデックス番号で指定できる。

// 選択中のoptionのvalue
const selected_option_value = select.value

// n番目のoptionを取得
const n_option_value = options[n].value