JavaScript

最終更新日：
公開日：

レシピ

フォーム

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

セレクトボックス（select要素）の選択状態をJavaScriptで設定する方法について解説します。

この記事のポイント

  • select要素のselectedIndexプロパティに数値を入れて選択状態にする
  • 複数選択できるmultiple属性を持つselect要素は、option要素のselectedプロパティにtrueを入れて選択状態にする

目次

セレクトボックスを選択状態にする

フォームなどのセレクトボックス（select要素）の選択状態は、JavaScriptからselect要素のselectedIndexプロパティに数値を入れることで設定することができます。

JavaScript コード例

select.selectedIndex = 3;

selectedIndexプロパティに設定できる値は、select要素内のoption要素の数に準じます。
値は0を先頭とし、1つ目を選択したい場合は0、4つ目を選択したいときは3を設定します。
また、-1を選択した場合は選択無し（選択解除）の状態になります。

もう少し具体的な例を紹介していきます。
今回は下記のようなフォームのHTMLから「main.js」というJavaScriptを読み込むことを想定し、main.jsよりフォームのselect要素を取得し、selectedIndexプロパティに値を設定してみましょう。

HTML コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GRAYCODE JavaScript</title>
  <script src="main.js"></script>
</head>
<body>
  <article id="content1">
    <h1>JavaScriptレシピ</h1>
    <form method="post" action="">
      <div>
        <label for="select-age">年齢：</label>
        <select id="select-age" name="age">
          <option value="1">〜19歳</option>
          <option value="2">20歳〜29歳</option>
          <option value="3">30歳〜39歳</option>
          <option value="4">40歳〜49歳</option>
          <option value="5">50歳〜59歳</option>
          <option value="6">60歳〜</option>
        </select>
      </div>
      <input type="submit" id="btn-submit" name="btn-submit" value="送信">
    </form>
  </article>
</body>
</html>

続いて、main.jsは下記のようなコードになります。
(2)の赤字の箇所で、select要素のselectedIndexプロパティに「2」を設定し、「30歳〜39歳」が選択された状態にしています。

main.js

// (1) ページ読み込み完了時に実行
window.addEventListener('load', ()=>{

  // (2) 年齢のセレクトボックスに選択状態を設定
  const selectAge = document.getElementById('select-age');
  selectAge.selectedIndex = 2;

  // (3) 送信ボタンのHTMLを取得
  const btnSubmit = document.getElementById('btn-submit');

  // (4) 送信ボタンがクリックされたときのイベントリスナー設定
  btnSubmit.addEventListener('click', (e)=>{
    e.preventDefault();

  // (5) セレクトボックスで選択されている値を出力
    console.log(selectAge.selectedIndex); 選択を変更していなければ 2 が出力される
  });
});

こちらのコードをブラウザで開いて実行し、送信ボタンをクリックするとフォームのセレクトボックスである「年齢」で選択された値をconsole.logメソッドで出力します。
もしフォームの年齢を変更せずに送信ボタンを押した場合、(2)で選択状態にしている2が出力されます。

複数選択できるセレクトボックスで選択状態を設定する

multiple属性を持つ複数選択できるセレクトボックス（select要素）では、複数選択状態にするときはselect要素のselectedIndexプロパティではなく、子孫要素のoption要素が持つselectedプロパティにtrueを設定して選択状態にします。
selectedIndexプロパティは1つしか値を設定できないため、複数選択した状態に設定することはできません。

HTML コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GRAYCODE JavaScript</title>
  <script src="main.js"></script>
</head>
<body>
  <article id="content1">
    <h1>JavaScriptレシピ</h1>
    <form method="post" action="">
      <div>
        <label for="your_name">氏名：</label><input type="text" id="your_name" name="your_name" value="" placeholder="氏名を入力してください">
      </div>
      <div>
        <label for="select-interest">興味のある分野：</label>
        <select id="select-interest" name="interest" multiple>
          <option value="1">デザイン</option>
          <option value="2">コーディング</option>
          <option value="3">フロントエンド</option>
          <option value="4">バックエンド</option>
          <option value="5">マーケティング</option>
          <option value="6">企画</option>
        </select>
      </div>
      <div>
        <label for="privacy_policy"><input type="checkbox" id="privacy_policy" name="privacy_policy" value="1">個人情報保護方針に同意する</label>
      </div>
      <input type="submit" id="btn-submit" name="btn-submit" value="送信">
    </form>
  </article>
</body>
</html>

以下のコードでは、(2)の部分でindexプロパティが1と3のみ（2つ目と4つ目のoption要素）選択状態にしています。

main.js

// (1) ページ読み込み完了時に実行
window.addEventListener('load', ()=>{

  // (2) 年齢の選択状態を設定
  const selectInterest = document.getElementById('select-interest');
  for(const option of selectInterest.options) {
    if(option.index === 1 || option.index === 3) option.selected = true;
  };

  // (3) 送信ボタンのHTMLを取得
  const btnSubmit = document.getElementById('btn-submit');

  // (4) 送信ボタンがクリックされたときのイベントリスナー設定
  btnSubmit.addEventListener('click', (e)=>{
    e.preventDefault();

    // (5) セレクトボックスで選択されている値を出力
    for(const option of selectInterest.selectedOptions) {
      console.log(option.index); 選択状態が変更されていなければ 1 と 3 を表示
    }
  });
});

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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

関連記事

前のページへ 一覧に戻る 次のページへ