javascriptでhtmlのセレクトボックスの値の取得

Question

###前提・実現したいこと
htmlのセレクトボックスの値をjavascriptにより取得したいです。

###発生している問題・エラーメッセージ

どれを選んでも最初のshopしか出てきません。

###該当のソースコード

<div class="form-group">
<p>row</p>
<select id="row_field" class="form-control">
<option value="shop">shop</option>
<option value="staff">staff</option>
<option value="month">month</option>
<option value="sales">sales</option>
</select>
<p>val</p>
<select id="val_field" class="form-control">
<option value="shop">shop</option>
<option value="staff">staff</option>
<option value="month">month</option>
<option value="sales">sales</option>
</select>
<p>col</p>
<select id="col_field" class="form-control">
<option value="shop">shop</option>
<option value="staff">staff</option>
<option value="month">month</option>
<option value="sales">sales</option>
</select>
</div>

###試したこと

var pivot_row_field=$('#row_field').val();
var pivot_val_field=$('#val_field').val();
var pivot_col_field=$('#col_field').val();
//html上のセレクトボックスでどれを選んでも最初のshopになってしまいます。
//他に同じ書き方をしてるものはうまく言っているのですが、これだけうまく行きません。
//alertなどで変数を呼び出すと、全てshopでした。

###補足情報(言語/FW/ツール等のバージョンなど)
jQueryは使えます。よろしくお願いします

Comments

[m.ts10806]

「どれを選んでも」とのことですが、ご提示のJavascriptだけでは「選んだときに取得」というのが出来ない（そもそもイベントが何も起きていない）かと思います。「他に同じ書き方をしているもの」も含めてコードをなるべく全てご提示ください。

[mikomal]

ご指摘ありがとうございます。変数はalartで表示させていました。alartで表示されるものが全てshopとなっていたので、取得できていないと考えました。他のものは今コードを見れる環境でないため、改めて追記します。

Answer 1

changeイベントの後で値を取得しないといけませんね。

Comments

[mikomal]

ご回答ありがとうございます。勉強を始めたばかりで知識不足なため、ご回答の内容が分かりかねます。よろしければ詳細な内容を教えていただければと思います。

[退会済みユーザー]

jQuery change event で検索してみてください。せめてその後で追加の質問を。

[mikomal]

ご指摘ありがとうございます。調べてみます。

Answer 2

どのタイミングで値を参照するかによりますね
Kosuke_Shibuyaさんのご指摘の通りchangeのたびに拾うのが妥当です

$(function(){
  $('#row_field,#val_field,#col_field').on('change',function(){
    console.log(
      "row_field:"+$('#row_field').val()+"\n"+
      "val_field:"+$('#val_field').val()+"\n"+
      "col_field:"+$('#col_field').val()+"\n"
      );
  });
});

Comments

[mikomal]

解決しました。ご回答ありがとうございます。