【保存版】jQueryでセレクトボックスを自在に操る！基本操作から応用例まで

2024-06-19

jQueryを使って複数選択ボックスの値を取得する方法

方法1： val()メソッドを使う

この方法は、最もシンプルで分かりやすい方法です。

$(document).ready(function(){
  $("#selectbox").change(function(){
    var values = $(this).val();
    console.log(values);
  });
});

このコードは、#selectboxというIDを持つ複数選択ボックスに対して、changeイベントが発生した際に処理を実行します。処理内容は、選択された値をval()メソッドを使って取得し、コンソールに出力するというものです。

この方法は、選択されたすべての値を配列として取得したい場合に便利です。

$(document).ready(function(){
  $("#selectbox").change(function(){
    var values = [];
    $(this).find("option:selected").each(function(){
      values.push($(this).val());
    });
    console.log(values);
  });
});

このコードは、方法1と同様にchangeイベントが発生した際に処理を実行します。処理内容は、選択されたすべてのoption要素に対してeach()メソッドを繰り返し実行し、それぞれの値をvalues配列にプッシュしていくというものです。

補足

上記のコードは、基本的な例です。実際の使用状況に合わせて、適宜カスタマイズする必要があります。
複数選択ボックスにname属性を設定している場合は、$(this).attr('name')を使って名前を取得することもできます。
選択された値を加工したい場合は、map()メソッドなどを利用することができます。

これらの資料を参考に、ご自身の目的に合った方法で複数選択ボックスの値を取得してください。

サンプルコード：jQueryを使って複数選択ボックスの値を取得

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryで複数選択ボックスの値を取得</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>jQueryで複数選択ボックスの値を取得</h1>
  <select id="selectbox" multiple>
    <option value="1">選択1</option>
    <option value="2">選択2</option>
    <option value="3">選択3</option>
  </select>
  <button id="button">値を取得</button>
  <script src="script.js"></script>
</body>
</html>

CSS

body {
  font-family: sans-serif;
}

#selectbox {
  width: 200px;
  margin-bottom: 10px;
}

#button {
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

JavaScript

$(document).ready(function(){
  $("#button").click(function(){
    var values = $("#selectbox").val();
    console.log(values);
  });
});

説明

HTMLコードでは、複数選択ボックス (select) とボタン (button) を定義しています。
CSSコードでは、要素のスタイルを設定しています。
JavaScriptコードでは、ボタンがクリックされたときに処理を実行するようイベントを設定しています。処理内容は、選択された値をval()メソッドを使って取得し、コンソールに出力するというものです。

実行方法

上記のHTML、CSS、JavaScriptコードをそれぞれindex.html、style.css、script.jsというファイルに保存します。
ブラウザでindex.htmlファイルを開きます。
複数選択ボックスで好きな値を選択し、「値を取得」ボタンをクリックします。

コンソール出力

["1", "3"]

この例では、選択された値が["1", "3"]という配列で出力されます。

応用例

このサンプルコードを応用することで、以下のようなことができます。

選択された値をデータベースに保存する
選択された値に基づいてダイナミックにコンテンツを表示する
選択された値をグラフで可視化

ぜひご自身の目的に合わせて活用してみてください。

jQueryで複数選択ボックスの値を取得するその他の方法

この方法は、val()メソッドと同様に選択された値を取得できますが、prop()メソッドの方がIE8などの古いブラウザでも動作するという利点があります。

$(document).ready(function(){
  $("#selectbox").change(function(){
    var values = $(this).prop("selected");
    $.each(values, function(i, value){
      if (value.selected) {
        console.log($(value).val());
      }
    });
  });
});

$(document).ready(function(){
  $("#selectbox").change(function(){
    var values = $(this).find("option:selected").filter(function(){
      return $(this).val() != "";
    });
    console.log(values.map(function(){
      return $(this).val();
    }));
  });
});