複数あるselectの値をすべて出力したい。

いつも勉強させていただいております。

セレクトボックスが複数ある場合に、その選択の結果を出力したいと思っています
下記の場合だと、<p id="out_keisan"></p>には最後のセレクトボックスの結果しか反映されません。

html
1<select name="test1" id="" class="f1" >
2  <option value=""></option>
3  <option value="りんご">りんご</option>
4  <option value="れもん">れもん</option>
5</select>
6<select name="test2" id=""  class="f1">
7  <option value=""></option>
8  <option value="りんご">りんご</option>
9  <option value="れもん">れもん</option>
10</select>
11
12<p id="out_put"></p>
13
14<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
15      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
16      crossorigin="anonymous"></script>

js
1$(function () {
2 //セレクトボックスが切り替わったら発動
3    $('select.f1').change(function () {
4        $("select.f1").each(function () {
5
6            //選択したvalue値を変数に格納
7            var val = $(this).val();
8            console.log(val);
9            
10            $('#out_put').text(val);
11        });
12    });
13});

コンソール上は1つ目を切り替えてもログが出力されています。

これを<p id="out_keisan"></p>にどちらも出すにはどうすればよいでしょうか？
上記の場合は２つのセレクトボックスを作っていますが、
selectの個数が変動するので、いくつ選択されていても、出力できるようにしたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1$(function(){
2  $('.f1').on('change',function(){
3    var vals=$('.f1').map(function(){
4      return $(this).val();
5    }).get().join(",");
6    $('#out_put').html(vals);
7  });
8});