からくりがてんこ

IT関連情報、プログラミングに関する作業ログや備忘録を記載していきます。

RailsでAjax!セレクトボックスを動的に作る!

セレクトボックスを選択したら、別のセレクトボックスを動的に作るってやつをやりました。
イメージしやすいところで言えば、都道府県を選んだら市町村のセレクトボックスが動的にできるパターン

仕事で使ったパターンはメーカーを選ぶとモデルのセレクトボックスを作るってやつなので、それを実現させてみました。

メーカーとモデルは、「1対多」の関係の構成になっています。

まずは、ルート設定でindex表示用とajax用を定義します。

#config/routes.rb

Rails.application.routes.draw do
  # index表示用
  get  '/customizes' => 'customize#index'
  # ajax
  get  '/customizes/maker_select' => 'customize#maker_select'
end

コントローラー内部はこんな感じになりました。

#app/controllers/customize_controller.rb

class CustomizeController < ApplicationController

  def index
    @makers = Maker.all  # メーカーの一覧を取得
    @models = Model.none # 最初は空を設定
  end

  ...(略)...

  # ajax
  def maker_select
    # pluckで敢えて配列にしています。
    @models = Model.where(maker_id: params[:maker_id]).pluck(:name, :id)

    # 初期値
    @models.unshift(["選択してください。", ""])
  end

  ...(略)...

end

ajaxで呼ばれるメソッドは敢えて、pluckを使って配列の@modelsをDBから取得しています。
これは、"選択してください。"という選択肢をセレクトボックスの一番上に表示したかったからです。
(他に良い方法ないかなぁ。。)

んで、viewの部分抜粋

#app/views/customize/index.html.erb

...(略)...

<div class="field">
  <%= f.label :メーカー %><br>
  <%= f.select(:maker, @makers, {id: 'customize_maker'}) %>
</div>
<div class="field">
  <%= f.label :モデル %><br>
  <%= f.select(:model, @models, {id: 'customize_model'}) %>
</div>

...(略)...

<script type="text/javascript">
  $(document).ready(function(){
    // メーカー選択
    $('#customize_maker').change(function(){
      var maker_id = $("#customize_maker").val();
      $.get("<%= customizes_maker_select_path %>",
        { maker_id: maker_id },
        function(data){ }
      );
    });
</script>

ajaxでメーカーのmaker_idをキーにモデルを取得しています。

maker_selectがajax呼出されて、ブラウザに返却するファイルです。
ここでは***.js.erbになっているところが要注意!

#app/views/customize/maker_select.js.erb

$("#customize_model").html("<%= escape_javascript(options_for_select(@models)) %>");

クライアントでこのjqueryの命令が実行されるといった流れになります。
customize_modelのidを持ったセレクトボックスが更新されて、目的達成!って感じです。

スッキリ

感謝サイト:
http://itmemojp.blogspot.jp/2012/10/rails.html