セレクトボックス（select要素）の選択した項目を取得・変更する

セレクトボックス（select要素）の選択状態を取得する

フォームにあるセレクトボックス（select要素）の選択している項目を取得するときはvalueプロパティとselectedプロパティを参照します。

今回は解説用に以下のHTMLコードを使います。

HTMLコード例

<form method="post" action="">
  <select name="state">
    <option value="1">東京</option>
    <option value="2">埼玉</option>
    <option value="3">群馬</option>
    <option value="4">栃木</option>
    <option value="5">茨城</option>
    <option value="6">千葉</option>
    <option value="7">神奈川</option>
  </select>
</form>

セレクトボックスは親要素にあたるselect要素と、選択肢になるoption要素を組み合わせて使います。

選択した項目を取得するときはselect要素のvalueプロパティを参照するか、またはoption要素のselectedプロパティとvalueプロパティから取得できます。
手軽な方法は1つ目のselect要素のvalueプロパティを参照する方法で、次のように値を参照します。

JSコード例

window.addEventListener('DOMContentLoaded', function(){

  // select要素を取得
  let select_state = document.querySelector("select[name=state]");

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

こちらのコードで実行している内容を解説します。

1行目のイベントリスナー「DOMContentLoaded」はページ読み込み時に処理を実行するために記述しています。

続くquerySelectorメソッドではselect要素を取得して、さらにイベントリスナー「change」を登録します。
イベントリスナー「change」はセレクトボックスが選択されるタイミングで処理を実行することができ、ここではselect要素のvalueプロパティを参照して選択された項目の値を出力するようにしています。

valueプロパティから取得する値で選択した項目を判断することも可能ですが、multiple属性で項目を複数選択できるときや、項目の値ではなくラベルを参照したいときなど、select要素の子要素であるoption要素を参照した方が適当なことがあります。

以下の例はoption要素を参照する形に変更したものです。
イベントリスナーの登録までは上記のコードと共通になります。

JSコード例

window.addEventListener('DOMContentLoaded', function(){

  // select要素を取得
  let select_state = document.querySelector("select[name=state]");

  select_state.addEventListener('change',function(){

    // 全てのoption要素を取得
    let option_states = document.querySelectorAll("select[name=state] option");
    for(let state of option_states) {

      if(state.selected) {
        console.log(state.value); // 「埼玉」を選択したら「2」と出力
        console.log(state.textContent); // 「埼玉」を選択したら「埼玉」と出力
      }
    }
  });
});

querySelectorAllメソッドで全てのoption要素を取得して、変数option_statesに入れます。
この変数には取得したoption要素が配列形式で入ります。

続いて、option要素の数だけループ処理を実行するようにfor…of文を使います。
option要素であれば選択状態をselectedプロパティから判断することができます。

selectedプロパティは選択状態ならtrue、選択されていないときはfalseが入るため、これをif文の条件式として設定します。
if文の中では選択された項目の値とラベルをそれぞれ出力します。

セレクトボックスが複数選択できるmultiple属性がついている時でも、上記のコードで全ての選択項目の値とラベルを出力することができます。
以下のHTMLコードはmultiple属性を追加し、さらにoptgroup要素を使って地方をグルーピングしています。

HTMLコード例

<form method="post" action="">
  <select name="state" multiple>
    <optgroup label="関東">
      <option value="1">東京</option>
      <option value="2">埼玉</option>
      <option value="3">群馬</option>
      <option value="4">栃木</option>
      <option value="5">茨城</option>
      <option value="6">千葉</option>
      <option value="7">神奈川</option>
    </optgroup>
    <optgroup label="関西">
      <option value="8">大阪</option>
      <option value="9">京都</option>
      <option value="10">兵庫</option>
      <option value="11">滋賀</option>
      <option value="12">奈良</option>
      <option value="13">和歌山</option>
    </optgroup>
  </select>
</form>

JSコードは変更する必要はありません。
項目の複数選択がONになっている状態で、「東京」「千葉」「奈良」を選択すると以下のように出力されます。

出力例

// 1
// 東京
// 6
// 千葉
// 12
// 奈良

セレクトボックスの選択状態を変更する

セレクトボックスの項目の選択状態を変更するときはselectedプロパティに値を代入することで可能です。
選択状態にするときはtrueを入れ、選択解除するときはfalseを入れます。

以下の例はページが読み込まれたタイミングで「京都」のみ選択状態にし、その他の項目は選択解除を行います。

JSコード例

window.addEventListener('DOMContentLoaded', function(){

  let option_states = document.querySelectorAll("select[name=state] option");
  for(let state of option_states) {
    if(state.textContent === '京都') {
      state.selected = true;
    } else {
      state.selected = false;
    }
  }
});

ページが読み込まれたタイミングで全てのoption要素を取得して、textContentプロパティメソッドが「京都」の項目のみselectedプロパティにtrueを入れて選択状態にします。
「京都」以外の項目についてはelse文が実行されてselectedプロパティにfalseが入ります。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。