[JavaScript]select（選択要素）で選択中のoption要素を取得する

value値ではなく、要素そのものを取得する方法です。

サンプル

<section>
  <select name="" id="select">
    <option value="りんご">りんご</option>
    <option value="もも">もも</option>
    <option value="みかん">みかん</option>
  </select>
</section>

<script>
  const targetSelect = document.getElementById('select');
  const option = targetSelect.options[targetSelect.selectedIndex];
</script>

変数「option」には以下の様な要素が取得できました。

<option value="りんご">りんご</option>

※上記サンプルではセレクトが変更された場合などはスキップしています。

optionに設定されたデータ要素を取得する

最も有効活用できるパターンはoptionに設定されたデータ要素などを取得する場合でしょうか。

英語名：

<select name="" id="select2">
  <option value="りんご" data-en="apple">りんご</option>
  <option value="もも" data-en="peach">もも</option>
  <option value="みかん" data-en="orange">みかん</option>
</select>

<p>英語名：<span id="english"></span></p>

<script>
  const targetSelect2 = document.getElementById('select2');
  const english = document.getElementById('english');

  targetSelect2.addEventListener('change', () => {
    const option2 = targetSelect2.options[targetSelect2.selectedIndex];
    const optionEn = option2.getAttribute('data-en');
    english.textContent = optionEn;
  });
</script>

要素そのものを取得して、設定されているデータ属性を表示しています。