[JavaScript] 選択されたセレクトボックスのラベルを取得する

投稿日：2016年10月9日更新日：2018年5月3日

選択されたセレクトボックスのラベル（表示されているテキスト）を取得するサンプルです。

サンプルソース

例）ボタンを押すと選択中のラベルをアラート表示する

function getSelectLabel(idname){
  var obj = document.getElementById(idname);
  var idx = obj.selectedIndex;       //インデックス番号を取得
  var val = obj.options[idx].value;  //value値を取得
  var txt  = obj.options[idx].text;  //ラベルを取得

  alert('選択したのは「インデックス:' + idx + ' 値:' + val + ' ラベル:' + txt + '」です');
}

function getSelectLabel(idname){

var obj = document.getElementById(idname);

var idx = obj.selectedIndex; //インデックス番号を取得

var val = obj.options[idx].value; //value値を取得

var txt = obj.options[idx].text; //ラベルを取得

alert('選択したのは「インデックス:' + idx + ' 値:' + val + ' ラベル:' + txt + '」です');

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <select id="sel1" >
    <option value="01">東京</option>
    <option value="02">大阪</option>
    <option value="03">名古屋</option>
  </select>
  <input type="button" value="ボタン" onclick="getSelectLabel('sel1');">
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</select>

</body>

</html>

実行サンプル

ボタンを押すと、選択した項目の情報が表示されます。

解説

セレクトボックスのoptionsにインデックス番号を渡すと要素のオブジェクトが取得できます。
取得したオブジェクトに対して.textを取得すればラベルを取得できます。

執筆者：とら