JavaScript

最終更新日：
公開日：

レシピ

フォーム

セレクトボックス（select要素）で選択されている項目のラベルを取得する

セレクトボックス（select要素）で選択されている項目（option要素）のラベルを取得する方法について解説します。

この記事のポイント

  • select要素の選択中のラベルはoptionsプロパティが持つlabelプロパティで取得できる
  • select要素の選択中のvalue属性はvalueプロパティから取得できる

目次

セレクトボックスの選択状態の項目ラベルを取得する

フォームなどのセレクトボックス（select要素）で選択状態の項目について、value属性とは別にラベルを取得したり、変更したいケースがあります。
そのときは、select要素のoptionsプロパティからlabelプロパティを参照することで取得することができます。

JavaScript コード例

const label = select.options[select.selectedIndex].label;

選択中の項目を特定するためにselectedIndexプロパティと併用しています。

より具体的な例

もう少し具体的な例として、以下のHTMLを使ってセレクトボックスの選択中のラベルを取得してみます。
実際のフォームでは、下記のHTMLのようにoption要素のvalue属性とラベルは異なるケースが多いと思います。

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="interest">興味のある分野：</label>
        <select id="select-interest" name="interest">
          <option>選択してください</option>
          <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>
      <input type="submit" id="btn-submit" name="btn-submit" value="送信">
    </form>
  </article>
</body>
</html>

例えば、「<option value=”1″>デザイン</option>」のvalue属性は「1」、ラベルは「デザイン」です。
valueプロパティを参照すれば「1」を取得することができ、labelプロパティを参照すれば「デザイン」を取得できます。

上記のHTMLが読み込むmain.jsとして、以下の内容を実装します。
ここではラベルのlabelプロパティと、value属性のvalueプロパティをそれぞれconsole.logメソッドで出力します。

main.js

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

  // (2) select要素のHTMLを取得
  const select = document.getElementById('select-interest');

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

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

    // (5) セレクトボックスの選択中のラベルを出力
    console.log('ラベル：' + select.options[select.selectedIndex].label);

    // (6) セレクトボックスの選択中のvalue属性を出力
    console.log('value属性：' + select.options[select.selectedIndex].value);
  });
});

複数選択できるセレクトボックスで選択中のラベルを全て取得する

multiple属性を持つ複数選択できるセレクトボックス（select要素）の場合、selectedIndexプロパティで全ての選択中の項目を取得することができません。
代わりに、ループ処理を使って子孫要素のoption要素を1つずつ取り出し、selectedプロパティで選択状態を確認してからlabelプロパティよりラベルを取得します。

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="interest">興味のある分野：</label>
        <select id="select-interest" name="interest" multiple>
          <option>選択してください</option>
          <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>
      <input type="submit" id="btn-submit" name="btn-submit" value="送信">
    </form>
  </article>
</body>
</html>

main.js

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

  // (2) select要素のHTMLを取得
  const select = document.getElementById('select-interest');

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

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

    const label = Array();

    // (5) セレクトボックスの選択中のラベルを取得
    for(const option of select.options) {
      if(option.selected) label.push(option.label);
    }

    // (6) 取得したラベルを全て出力
    console.log(label)
  });
});

(5)の箇所でセレクトボックス内のoption要素を1つずつ取り出し、選択状態を持つoption.selectedがtrue（選択中）の場合のみ、配列labelにラベルを追加します。
その後は(6)の箇所でconsole.logメソッドより取得した値を全て出力しています。

例えば、セレクトボックスから「デザイン」「コーディング」「マーケティング」「企画」を選択した状態で送信ボタンを押した場合、console.logメソッドによって以下のように出力されます。

出力例

(4) ['デザイン', 'コーディング', 'マーケティング', '企画']

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

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

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

関連記事

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