jQueryで複数のselectのvalueを取得

Question

jQueryでのselectのvalueの取得方法がわからず、質問させていただきます。
現在SpringBoot + jQuery + ajaxを使ったsampleを練習のため自分で作成しています。

現状htmlのコードが

<select id="select">
<option th:each="hoge : ${fooMap}" th:text="${hoge.value}" th:value="${hoge.key}">
</select>
<select id="select">
<option th:each="hoge : ${fooMap}" th:text="${hoge.value}" th:value="${hoge.key}">
</select>
<select id="select">
<option th:each="hoge : ${fooMap}" th:text="${hoge.value}" th:value="${hoge.key}">
</select>
<select id="select">
<option th:each="hoge : ${fooMap}" th:text="${hoge.value}" th:value="${hoge.key}">
</select>

このような形で記述しており、このselectのvalueを一度に取得したいと考えています。
（同じ内容をもつselectBoxが4つ並んでいるイメージです)

var sample = $('select').val();

のような形でselectのvalueを取得しようとすると最初の一つのvalueが送られる状態です。

これをsampleに{1,2,3,4}といった具合に一度の取得で複数の値をsampleに入れる方法がわからず、質問させていただきます。

初学者でわからないことも多く、質問させていただきます。

Answer 1

この手の処理はmapしてgetするのが常套

<script>
$(function(){
  console.log($('select').map(function(){return $(this).val()}).get());
});
</script>
<select>
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select>
<option value="0">0</option>
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2" selected>2</option>
</select>

Comments

[yakisoba58]

ありがとうございます。
色々試してみたいと思います！

Answer 2

selectのvalueを取得しようとすると最初の一つのvalueが送られる状態です。

はい、そういう仕様です（jQuery公式）。

全部取得したいなら、ループやeachで回すなどが必要になります。

// その1 eachで回す
var sample = [];
$('select').each(function(){ 
  sample.push($(this).val()); 
});

// その2 Arrayのようにmapする
var sample = [].map.call($('select'), function(){
  return $this.val();
});

Comments

[maisumakun]

なお、$('select')は「ページ内にある<select>全部」という意味で、振ったIDとは無関係に動きます。

[yakisoba58]

ありがとうございます。
どちらの方法も試してみたいと思います！

Answer 3

selectのname属性をname="hoge[]"のように配列にしてあげるのが簡単です。

※あとhtmlの規約的に同一ページに同一id複数はNGです。

Comments

[yakisoba58]

回答ありがとうございます！