niki12260714の日記

フリーランスのITエンジニアの呟き。

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

f:id:niki12260714:20180620175754j:plain

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形式にデータを展開します。

以上!