1 概要
2 書式
- 2.1 補足
  - 2.1.1 書式
3 コード
- 3.1 解説
  - 3.1.1 コンボボックス
  - 3.1.2 リストボックス
  - 3.1.3 リストボックス型 (複数選択)
- 3.2 実行結果
  - 3.2.1 コンボボックス
  - 3.2.2 リストボックス
  - 3.2.3 リストボックス (複数選択)

jQueryで選択ボックス / コンボボックスの選択状態を取得する - jQuery

jQueryで選択ボックスやコンボボックスの選択状態を取得するコードを紹介します。

概要

選択ボックスやコンボボックスの選択状態を取得するには、セレクタでセレクトボックスのselect要素を選択し、val()メソッドで選択されている要素のvalueを取得できます。

書式

$("セレクタ").val()

jquery("セレクタ").val()

補足

別の方法として、select内のoption要素を選択してprop("selected")で個々の要素の選択状態を取得することもできます。

書式

$("セレクタ").prop("selected")

jquery("セレクタ").prop("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" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#Button1").click(function () {
        value = $("select[name='select01']").val();

        switch (value) {
          case "item01":
            $("#output1").text("要素1が選択されています。");
            break;
          case "item02":
            $("#output1").text("要素2が選択されています。");
            break;
          case "item03":
            $("#output1").text("要素3が選択されています。");
            break;
        }
      })

      $("#Button2").click(function () {
        value = $("option[value='Penguin']").prop("selected");
        if (value==true){
          $("#output2").text("ぺんぎんが選択されています。");
        }
        value = $("option[value='Duck']").prop("selected");
        if (value == true) {
          $("#output2").text("あひるが選択されています。");
        }
        value = $("option[value='Owl']").prop("selected");
        if (value == true) {
          $("#output2").text("フクロウが選択されています。");
        }
        value = $("option[value='Whale']").prop("selected");
        if (value == true) {
          $("#output2").text("くじらが選択されています。");
        }
        value = $("option[value='Camel']").prop("selected");
        if (value == true) {
          $("#output2").text("ラクダが選択されています。");
        }
      })

      $("#Button3").click(function () {
        value = $("select[name='select03']").val();
        seltext = "";
        for (i = 0; i < value.length; i++) {
          switch (value[i]) {
            case "Apple":
              seltext += "リンゴ、";
              break;
            case "Pear":
              seltext += "梨、";
              break;
            case "Pine":
              seltext += "パイナップル、";
              break;
            case "Grape":
              seltext += "ぶどう、";
              break;
            case "Fragaria":
              seltext += "いちご、";
              break;
          }

        }
        $("#output3").text(seltext+"が選択されています。");

      })

    })
  </script>
  
</head>
<body>
  <div>コンボボックス型</div>
  <select name="select01">
    <option value="item01">要素1</option>
    <option value="item02">要素2</option>
    <option value="item03">要素3</option>
  </select>
  <div><input id="Button1" type="button" value="button" /></div>
  <div id="output1"></div>

  <hr/>
  <div>リストボックス型</div>
  <select name="select02" size="5">
    <option value="Penguin">ぺんぎん</option>
    <option value="Duck">あひる</option>
    <option value="Owl">フクロウ</option>
    <option value="Whale">くじら</option>
    <option value="Camel">ラクダ</option>
  </select>
  <div><input id="Button2" type="button" value="button" /></div>
  <div id="output2"></div>

  <hr />
  <div>リストボックス型 (複数選択)</div>
  <select name="select03" size="5" multiple>
    <option value="Apple">りんご</option>
    <option value="Pear">梨</option>
    <option value="Pine">パイナップル</option>
    <option value="Grape">ブドウ</option>
    <option value="Fragaria">いちご</option>
  </select>
  <div><input id="Button3" type="button" value="button" /></div>
  <div id="output3"></div>

</body>
</html>

解説

コンボボックス

      $("#Button1").click(function () {
        value = $("select[name='select01']").val();

        switch (value) {
          case "item01":
            $("#output1").text("要素1が選択されています。");
            break;
          case "item02":
            $("#output1").text("要素2が選択されています。");
            break;
          case "item03":
            $("#output1").text("要素3が選択されています。");
            break;
        }
      })

上記がロジック部です。Button1がクリックされた際に実行され、name属性の値が"select01"のselect要素を取得します。val()メソッドを実行し、選択されている要素を取得し、出力エリアにメッセージを表示しします。

  <div>コンボボックス型</div>
  <select name="select01">
    <option value="item01">要素1</option>
    <option value="item02">要素2</option>
    <option value="item03">要素3</option>
  </select>
  <div><input id="Button1" type="button" value="button" /></div>
  <div id="output1"></div>

上記がUI部です。こちらは一般的なコンボボックスのHTMLを記述しています。

リストボックス

     $("#Button2").click(function () {
        value = $("option[value='Penguin']").prop("selected");
        if (value==true){
          $("#output2").text("ぺんぎんが選択されています。");
        }
        value = $("option[value='Duck']").prop("selected");
        if (value == true) {
          $("#output2").text("あひるが選択されています。");
        }
        value = $("option[value='Owl']").prop("selected");
        if (value == true) {
          $("#output2").text("フクロウが選択されています。");
        }
        value = $("option[value='Whale']").prop("selected");
        if (value == true) {
          $("#output2").text("くじらが選択されています。");
        }
        value = $("option[value='Camel']").prop("selected");
        if (value == true) {
          $("#output2").text("ラクダが選択されています。");
        }
      })

上記がロジック部です。Button2がクリックされた際に実行されます。"select02"のselect要素内にあるoption要素を一つづつ選択し、"selected"属性の値を取得します。値がtrueであれば、その要素が選択されれいるため、メッセージを画面に表示します。
先のコンボボックスのコードと同様に

value = $("select[name='select02']").val();

によって選択されている要素を取得できます。(コードの可読性やシンプルさでは上記のval()を用いたコードのほうが良いです。)

  <div>リストボックス型</div>
  <select name="select02" size="5">
    <option value="Penguin">ぺんぎん</option>
    <option value="Duck">あひる</option>
    <option value="Owl">フクロウ</option>
    <option value="Whale">くじら</option>
    <option value="Camel">ラクダ</option>
  </select>
  <div><input id="Button2" type="button" value="button" /></div>
  <div id="output2"></div>

UI部に関しては一般的なHTMLの選択ボックスのコードです。

リストボックス型 (複数選択)

      $("#Button3").click(function () {
        value = $("select[name='select03']").val();
        seltext = "";
        for (i = 0; i < value.length; i++) {
          switch (value[i]) {
            case "Apple":
              seltext += "リンゴ、";
              break;
            case "Pear":
              seltext += "梨、";
              break;
            case "Pine":
              seltext += "パイナップル、";
              break;
            case "Grape":
              seltext += "ぶどう、";
              break;
            case "Fragaria":
              seltext += "いちご、";
              break;
          }
        }
        $("#output3").text(seltext+"が選択されています。");

      })

Button3がクリックされた際に実行され、name属性の値が"select03"のselect要素を取得します。val()メソッドを実行し、選択されている要素を取得します。要素は配列として取得できます。forループで配列の内容を確認し含まれる要素は選択されている要素と判定し、出力エリアにメッセージを表示しします。

  <div>リストボックス型 (複数選択)</div>
  <select name="select03" size="5" multiple>
    <option value="Apple">りんご</option>
    <option value="Pear">梨</option>
    <option value="Pine">パイナップル</option>
    <option value="Grape">ブドウ</option>
    <option value="Fragaria">いちご</option>
  </select>
  <div><input id="Button3" type="button" value="button" /></div>
  <div id="output3"></div>

UI部に関しては一般的なHTMLの選択ボックスのコードです。複数選択可能にするため"multiple"属性を記述します。