iPentec.com  /  Document  /  カテゴリ: JavaScript  /  タグ:  JavaScript HTML セレクトボックス

目次

セレクトボックスで選択されている項目を取得する

JavaScriptでセレクトボックスのどの項目が選択されているかを取得するコードを紹介します。

シングルセレクトの場合

一つの項目を選択する場合に選択状態を取得するコードを紹介します。

id属性で指定する場合

JavaScriptでフォームのコントロールをidから参照する場合は下記の書式になります。
document.forms.(参照するフォームのid).(参照するコントロールのid)

セレクトボックスの選択状態をidで参照する場合は下記の書式で参照できます。
document.forms.(参照するフォームのid).(参照するセレクトボックスのid).selectIndex

name属性で指定する場合

JavaScriptでフォームのコントロールをnameから参照する場合は下記の書式で参照できます。
document.(参照するフォームのname).(参照するコントロールのname)

セレクトボックスの選択状態を参照する場合は下記の書式で参照できます。
document.(参照するフォームのname).(参照するセレクトボックスのname).selectIndex

サンプルコード

以下のコードを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript" language="javascript">
    function onButtonClick() {
      selindex = document.form1.Select1.selectedIndex;
      target = document.getElementById("output");
      switch (selindex) {
        case 0:
          target.innerHTML = "要素1が選択されています。<br/>";
          break;
        case 1:
          target.innerHTML = "要素2が選択されています。<br/>";
          break;
        case 2:
          target.innerHTML = "要素3が選択されています。<br/>";
          break;
        case 3:
          target.innerHTML = "要素4が選択されています。<br/>";
          break;
        case 4:
          target.innerHTML = "要素5が選択されています。<br/>";
          break;
      }
    }
  </script>
</head>
<body>
  <form name="form1" action="">
    <select id="Select1"">
      <option>要素1</option>
      <option>要素2</option>
      <option>要素3</option>
      <option>要素4</option>
      <option>要素5</option>
    </select>
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>

  <div id="output"></div>
</body>
</html>

実行結果

HTMLファイルを表示します。下図の画面が表示されます。


セレクトボックスの右側の下向き矢印をクリックしてドロップダウンメニューを表示します。メニューから要素を選択します。今回は"要素4"を選択しました。


選択後セレクトボックスの右側の[Exec]ボタンをクリックします。


セレクトボックスの下部のエリアに選択された旨のメッセージが表示されます。


別の要素を選択し[#xec]ボタンを押すとメッセージの内容も変わります。

GetElementById を利用する場合

GetElementByIdを利用してセレクトボックス/コンボボックスの選択状態を取得することもできます。

コード

下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript" language="javascript">
    function onButtonClick() {
      target = document.getElementById("output");
      combo1 = document.getElementById("Select1");
      switch (combo1.selectedIndex) {
        case 0:
          target.innerHTML = "要素1が選択されています。<br/>";
          break;
        case 1:
          target.innerHTML = "要素2が選択されています。<br/>";
          break;
        case 2:
          target.innerHTML = "要素3が選択されています。<br/>";
          break;
        case 3:
          target.innerHTML = "要素4が選択されています。<br/>";
          break;
        case 4:
          target.innerHTML = "要素5が選択されています。<br/>";
          break;
      }
      
    }
  </script>
</head>
<body>
  <select id="Select1"">
    <option>要素1</option>
    <option>要素2</option>
    <option>要素3</option>
    <option>要素4</option>
    <option>要素5</option>
  </select>
  <input type="button" value="Exec" onclick="onButtonClick();" />

  <div id="output"></div>

</body>
</html>

解説

コンボボックスで要素を選択後、[Exec]ボタンをクリックすると、onButtonClick()関数を呼び出します。onButtonClick()関数では、getElementById メソッドを呼び出し、IDからコンボボックスのオブジェクトを取得します。コンボボックスオブジェクトのselectedIndexプロパティに現在選択されている要素のインデックス番号が格納されています。selectedIndexプロパティの値を判定して、コンボボックスのどの要素が選択されているかを示すメッセージを画面に表示します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


コンボボックスを開いて要素を選択します。


要素を選択後[Exec]ボタンをクリックします。


選択されている要素に応じたメッセージがコンボボックスの下部に表示されます。


コンボボックスで選択する要素を変更して[Exec]ボタンをクリックするとメッセージも変更されます。


マルチセレクトの場合

セレクトボックスが複数選択が可能な状態(multiple)の場合は、セレクトボックスのoptionsプロパティを確認して選択状態を確認します。

id属性で指定する場合

セレクトボックスの選択状態をidで参照する場合は下記の書式で参照できます。
document.forms.(参照するフォームのid).(参照するセレクトボックスのid).options[(要素のインデックス)].selected
とします。

name属性で指定する場合

セレクトボックスの選択状態をnameで参照する場合は下記の書式で参照できます。
document.(参照するフォームのname).(参照するセレクトボックスのname).options[(要素のインデックス)].selected

サンプルコード

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript" language="javascript">
    function onButtonClick() {
      target = document.getElementById("output");
      target.innerHTML ="";

      for (i = 0; i < document.form1.Select1.options.length; i++) {
        if (document.form1.Select1.options[i].selected == true) {
          target.innerHTML += document.form1.Select1.options[i].text + "が選択されています。<br/>";
        }
      }
    }
  </script>

</head>
<body>
  <form name="form1" action="">
    <select id="Select1" size="10" multiple>
      <option>要素1</option>
      <option>要素2</option>
      <option>要素3</option>
      <option>要素4</option>
      <option>要素5</option>
      <option>要素6</option>
      <option>要素7</option>
      <option>要素8</option>
    </select>
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>

  <div id="output"></div>
</body>
</html>

実行結果

HTMLファイルを表示します。下図の画面が表示されます。


要素を複数選択します。[ctrl]キーを押しながら要素をクリックすると複数の要素を選択できます。


[Exec]ボタンをクリックすると選択されている要素がセレクトボックスの下部にメッセージで表示されます。


選択されている要素を変更し[Exec]ボタンをクリックするとメッセージの内容も変化します。


GetElementById を利用する場合

GetElementByIdを利用してセレクトボックス/コンボボックスの選択状態を取得することもできます。

コード

下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript" language="javascript">
    function onButtonClick() {
      target = document.getElementById("output");
      target.innerHTML ="";

      selectBox1 = document.getElementById("Select1");
      for (i = 0; i < selectBox1.options.length; i++) {
        if (selectBox1.options[i].selected == true) {
          target.innerHTML += selectBox1.options[i].text + "が選択されています。<br/>";
        }
      }
    }
  </script>

</head>
<body>
  <select id="Select1" size="10" multiple>
    <option>要素1</option>
    <option>要素2</option>
    <option>要素3</option>
    <option>要素4</option>
    <option>要素5</option>
    <option>要素6</option>
    <option>要素7</option>
    <option>要素8</option>
  </select>
  <input type="button" value="Exec" onclick="onButtonClick();" />

  <div id="output"></div>
</body>
</html>

解説

[Exec]ボタンをクリックすると、onButtonClick()関数を呼び出します。onButtonClick()関数ではgetElementById()メソッドを呼び出して、セレクトボックスのオブジェクトを取得します。複数選択できるセレクトボックスの場合は、要素の項目がoptions配列に入っているため、options配列の要素をループしてそれぞれの要素のselected プロパティを確認することで、要素が選択されているか、層でないかを確認できます。要素が選択されている場合は、選択されている旨のメッセージを画面に表示します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


Ctrlキーを押しながら要素を選択します。要素を選択後[Exec]ボタンをクリックします。


選択された要素を表示するメッセージが画面下部に表示されます。


選択する要素を変更して[Exec]ボタンをクリックすると、メッセージも変化します。



補足

シングルセレクトのセレクトボックスの場合でも同じコードで実装することができます。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript" language="javascript">
    function onButtonClick() {
      target = document.getElementById("output");
      for (i = 0; i < document.form1.Select1.options.length; i++) {
        if (ocument.form1.Select1.options[i].selected == true) {
          target.innerHTML = document.form1.Select1.options[i] + "が選択されています。<br/>";
        }
      }     
    }
  </script>
</head>
<body>
  <form name="form1" action="">
    <select id="Select1"">
      <option>要素1</option>
      <option>要素2</option>
      <option>要素3</option>
      <option>要素4</option>
      <option>要素5</option>
    </select>
    <input type="button" value="Exec" onclick="onButtonClick();" />
  </form>

  <div id="output"></div>

</body>
</html>
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
作成日: 2014-01-14

関連するページ

ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
iPentecについて
プライバシー
お問い合わせ
Copyright © iPentec all rights reserverd.