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

このページのタグ:[JavaScript] [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"属性を記述します。

実行結果

コンボボックス

プロジェクトを実行します。下図の画面が表示されます。


コンボボックスをクリックしてドロップダウンリストを表示し、要素を選択します。


選択後、コンボボックス下部の[button]をクリックします。コンボボックスでどの要素が選択されているかを表すメッセージが下部に表示されます。


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

リストボックス

再度、プロジェクトを実行し画面を表示します。


リストボックスで要素をクリックして選択します。


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


別の要素を選択して[Button]をクリックします。メッセージの内容が変化します。

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

プロジェクトを実行し画面を表示します。


[Ctrl]キーを押しながらリストボックスの要素をクリックし、複数の要素を選択します。


選択後リストボックス下部の[Burton]をクリックします。どの要素が選択されているかを示すメッセージがボタンの下部に表示されます。


選択要素を変更し[Button]をクリックするとメッセージも変化します。

登録日 :2014-06-05    最終更新日 :2014-06-06
このページのタグ:[JavaScript] [jQuery]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)