jQueryとAjaxを使ってプルダウンが選択された時にもう一方のプルダウンの中身を決定する方法を紹介します。
フレームワークはRuby on Railsを使用しています。例として会社・子会社の場合で紹介しています。
jQueryでプルダウンが選択された時にもう一方のプルダウンの中身を決定する方法
会社プルダウンと子会社プルダウンを表示しています。子会社プルダウンは会社プルダウンが選択されるまでは非活性にしています。
・_company_index.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ... <label> <legend>会社</legend> <div> <%= create_company_pulldown :company_id, 'company_id', '選択してください', @filter_params[:company_id] %> </div> </label> <label> <legend>子会社</legend> <div> <%= f.select :subsidiary_company_id, @subsidiary_company_options, { prompt: '選択してください' }, class: 'subsidiary_company_check', disabled: @filter_params[:subsidiary_company_id] == nil %> </div> </label> ... |
子会社以外の会社を取得し、会社プルダウンに格納
・application_helper.rb
1 2 3 4 5 6 | # 会社マスタプルダウン用 def create_company_pulldown(name, class_name, prompt, selected_id = '') companies = ::Company.where(parent_company_id: nil).is_not_old select object, name, options_for_select(companies.collect { |u| [u.company_name, u.id] }, selected: selected), options, html_options end |
CoffeScriptで書かれているため若干書き方が異なります。
以下のサイトからjsファイルのjQueryに変換できます。
・companies.coffee
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | $ ($) -> # 会社プルダウンが変更された時のイベント $('#company_id').on 'change', -> $subsidiary_company_check = $('.subsidiary_company_check') company_id = $('[name=company_id]').val() # 会社が選択されていない場合 if (! company_id) $subsidiary_company_check.find('option').remove() $subsidiary_company_check.prop('disabled', true) return # Ajaxで送るデータ整形 formData = new FormData() formData.append 'company_id', company_id $.ajax type: 'POST' url: self.search_subsidiary_company_url data: formData cache: false contentType: false processData: false # 成功 .done (data, textStatus, jqXHR) -> $subsidiary_company_check.find('option').remove() $subsidiary_company_check.prop('disabled', false) $subsidiary_company_check.append $('<option></option>').text('選択してください').val('parent') $subsidiary_company_check.append $('<option></option>').text('すべて').val('all') # 子会社が存在しない場合 if (data['companies'].length == 0) $subsidiary_company_check.prop('disabled', true) $group_company_check.prop('checked', false) $group_company_check.prop('disabled', true) # 子会社が存在する場合 else $group_company_check.prop('disabled', false) # 子会社プルダウンにDOM生成 $(data['companies']).each (i) -> $subsidiary_company_check.append $('<option></option>').val(data['companies'][i].id).text(data['companies'][i].company_name) return # 失敗 .fail (jqXHR, textStatus, errorThrown) -> #エラーメッセージ表示 $('.error_message').html('') for k, v of $.parseJSON(jqXHR.responseText) $('.error_xs').append('<p>' + v[0]["message"] + '</p>') return |
ルーティング設定
routes.rb
1 2 3 4 5 6 | ... post :search_subsidiary_company ... |
AjaxのURL先。選択した会社IDから子会社取得を取得しています。
companies_controller.rb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | def search_subsidiary_company begin company_id = params[:company_id] @companies = Company.where(parent_company_id: company_id) respond_to do |format| format.json { render json: {companies: @companies}, status: 200 } end rescue ActiveRecord::ActiveRecordError => e format.json { render json: e.message, status: :unprocessable_entity } end end |