railsで二つのセレクトボックスを連動させる
都道府県のセレクトボックス選ぶと、隣にある市町村のセレクトボックスの中身が変わる。
そういう奴をrailsで作る方法です。
ネットに沢山情報がありますが、自分が分かりやすかった方法がこちら。
【プログラムの動き】
1.セレクトボックスにonchangeイベントを設定し、coffeescriptに記述した関数を呼び出す
2.呼び出された関数で、セレクトボックスの選択値を取得、Ajax通信を行い、データを取得
3.取得したデータを、coffeescriptでセレクトボックスの要素に設定する
というわけで、1から順番に。
【View】
<%= select_tag 'parent_select', options_for_select(@date_array), onchange: 'change_data()' %>
赤字のところで、「セレクトボックスが選択されたら、change_dataという関数を呼び出す」と設定します。
coffeescriptはインデントが大事なので、画像でコードを表示
app/assets/javascriptの中に配置されるcoffeescriptに記述します。
自分が詰まった場所について、それぞれ解説。
「4行目:$ ->」は、「jQueryを使用します」という宣言。
「5行目:@change_data =() ->」は、先ほどViewで設定した呼び出し関数ですが、ここでポイントは「@」と「()」。
coffeescriptのサイトでコンパイルすると分かりますが、@はthisを表します。
これがいないと、View側から見えないので、セレクトボックスを選択するとエラーになっちゃいます。
()も、呼び出される時には必要な設定。
「7行目:val = $('[name=parent_select]').val()」は、jQueryを使ってセレクトボックスで選択された値を取ってきます。
9~18行目はAjax通信部分で、json形式の戻り値を処理します。
処理は別関数に切り出してます、21行目以下。
jsonをfor文で回し、中身をoptionの中に入れてセレクトボックスの末尾に追加。
【controller】
def
data = Item.where(id: params[:id])
render json: group.select("id AS id, item_name AS name")
end
Ajax通信の個所。
render jasonで、json形式にデータを展開します。
以上!