セレクトボックスを選択したらサブミット

セレクトボックスを選択したらサブミットしてほしい時がありませんか？

（例えば、名古屋事業所と福岡事業所とで表示させる内容を変えたい時とか）

忘れるといけないので、書き留めておこうと思います。

①submit()関数をonchangeイベントで呼び、this.formのアクションを実行させる方法

html

<form method="post" action="#">
<select name="office" onchange="submit(this.form)">
  <option value="名古屋">名古屋</option>
  <option value="福岡">福岡</option>
</select>
</form>

②①の処理をJQuery関数で作成

jQuery

<script type="text/javascript">
$(function(){
  $("#submit_select").change(function(){
    $("#submit_form").submit();
  });
});
</script>

html

<form id="submit_form" method="post" action="#">
<select id="submit_select" name="office">
  <option value="名古屋">名古屋</option>
  <option value="福岡">福岡</option>
</select>
</form>

③複数のセレクトボックスがある場合(例えば、事業所＋表示件数)

　idに添字番号を付与し取得する、それだけで十分です。

jQuery

<script type="text/javascript">
$(function(){
    $("[id^=submit_select]").change(function(){
        $("#submit_form"+$(this).attr("id").slice(-1)).submit();
    });
});
</script>

html

<form id="submit_form1" method="post" action="#">
<select id="submit_select1" name="office">
  <option value="名古屋">名古屋</option>
  <option value="福岡">福岡</option>
</select>
</form>
<form id="submit_form2" method="post" action="#">
<select id="submit_select2" name="office">
  <option value="100">100</option>
  <option value="10">10</option>
</select>
</form>

④最後にメソッド名を付けプラグイン化してみます

jQuery

<script type="text/javascript" src="./scripts/jquery.select-submit-change.js"></script>
<script type="text/javascript">
$(function() {
  $("[id^=submit_select]").SelectSubmitChange();
});
</script>

jquery.select-submit-change.js

;(function($) {
  $.fn.SelectSubmitChange = function(){
    $(this).change(function(){
      $("#submit_form"+$(this).attr("id").slice(-1)).submit();
    });
  }
})(jQuery);