jQueryでプルダウンが選択された時にもう一方のプルダウンの中身を決定する方法【Ajax】

jQueryとAjaxを使ってプルダウンが選択された時にもう一方のプルダウンの中身を決定する方法を紹介します。

フレームワークはRuby on Railsを使用しています。例として会社・子会社の場合で紹介しています。

jQueryでプルダウンが選択された時にもう一方のプルダウンの中身を決定する方法

会社プルダウンと子会社プルダウンを表示しています。子会社プルダウンは会社プルダウンが選択されるまでは非活性にしています。

・_company_index.html.erb

 

子会社以外の会社を取得し、会社プルダウンに格納

・application_helper.rb

CoffeScriptで書かれているため若干書き方が異なります。

以下のサイトからjsファイルのjQueryに変換できます。

 

・companies.coffee

 

ルーティング設定
routes.rb

 

AjaxのURL先。選択した会社IDから子会社取得を取得しています。

companies_controller.rb