[JavaScript] セレクトボックスの選択中のインデックス番号を取得する

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

セレクトボックスの選択中のインデックス番号を取得するサンプルです。

サンプルソース

例）ボタンを押すと、セレクトボックスで選択されたインデックス番号を表示する

function getIndexNo(idname){
  // インデックス番号を取得する
  var obj = document.getElementById(idname);
  var result = obj.selectedIndex;

  // Alertで表示する
  alert('インデックス番号は' + result + 'です。');
}

function getIndexNo(idname){

// インデックス番号を取得する

var obj = document.getElementById(idname);

var result = obj.selectedIndex;

// Alertで表示する

alert('インデックス番号は' + result + 'です。');

}

<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="getIndexNo('sel1');">
</body>
</html>

<head>

</head>

<body>

</select>

</body>

</html>

実行サンプル

ボタンを押すと、選択された項目のインデックス番号をアラートで表示します。

解説

インデックス番号は、項目の先頭から順に 0、1、2・・・の順番で値を取得できます。
未選択の場合は-1が返ります。

執筆者：とら