【Rails】Ajaxでセレクトボックスの中身が動的に変わる実装(3段構成)

Question

#やりたいこと
親のカテゴリを変更すると、子のカテゴリの中身が動的に変わり、子のカテゴリが選択されると、孫のカテゴリも動的に変わるセレクトボックスをつくりたいです。
以下を参考にしました。
Ajaxでセレクトボックスの中身が動的に変わるRailsアプリの作り方(Qiita)
具体的にはUserが
Prefecture(都道府県)→School(学校)→Course(学科)
のカテゴリを動的に選択できるようにしたいです。
今のところPrefecture(都道府県)→School(学校)の2段目までは動いています。

##コード
View

users/school.html.erb

<% prefecture_options = Prefecture.order(:id).map { |s| [s.name, s.id, data: { children_path: prefecture_schools_path(s) }] }%>
    <div class="field">
      <%= f.label :prefecture_id,"都道府県" %><br>
      <%= f.select :prefecture_id, prefecture_options, { include_blank: true }, class: 'select-parent' %>
      <span class="pulldown"><i class="fa fa-angle-down" aria-hidden="true"></i></span>     
    </div>

    <% schools = @user.prefecture.try(:schools) || [] %>
    <% school_options = schools.map { |s| [s.name,s.id , data: { grandchildren_path: prefecture_school_courses_path(s) }] } %>
    <div class="field">
      <%= f.label :school_id,"大学名" %><br>
      <%= f.select :school_id, school_options, { include_blank: true }, class: 'select-children' %>
      <span class="pulldown"><i class="fa fa-angle-down" aria-hidden="true"></i></span>     
    </div>

    <% courses = @user.school.try(:courses) || [] %>
    <% course_options = courses.map { |s| [s.name, s.id] } %>

    <div class="field">
      <%= f.label :course_id,"学科名" %><br>
      <%= f.select :course_id, course_options, { include_blank: true }, class: 'select-grandchildren' %>
      <span class="pulldown"><i class="fa fa-angle-down" aria-hidden="true"></i></span>     
    </div>

$(document).on 'turbolinks:load', ->
  replaceSelectOptions = ($select, results) ->
    $select.html $('<option>')
    $.each results, ->
      option = $('<option>').val(this.id).text(this.name)
      $select.append(option)

#都道府県から大学名
  replaceChildrenOptions = ->
    childrenPath = $(@).find('option:selected').data().childrenPath
    $selectChildren = $(@).closest('form').find('.select-children')
    if childrenPath?
      $.ajax
        url: childrenPath
        dataType: "json"
        success: (results) ->
          replaceSelectOptions($selectChildren, results)
        error: (XMLHttpRequest, textStatus, errorThrown) ->
          console.error("Error occurred in replaceChildrenOptions")
          console.log("XMLHttpRequest: #{XMLHttpRequest.status}")
          console.log("textStatus: #{textStatus}")
          console.log("errorThrown: #{errorThrown}")
    else
      replaceSelectOptions($selectChildren, [])
  
#大学名から学科名
  replaceGrandChildrenOptions = ->
    grandchildrenPath = $(@).find('option:selected').data().grandchildrenPath
    $selectGrandChildren = $(@).closest('form').find('.select-grandchildren')
    console.log($(@).find('option:selected').data().grandchildrenPath)

    if grandchildrenPath?
      $.ajax
        url: grandchildrenPath
        dataType: "json"
        success: (results) ->
          replaceSelectOptions($selectGrandChildren, results)
        error: (XMLHttpRequest, textStatus, errorThrown) ->
          console.error("Error occurred in replaceChildrenOptions")
          console.log("XMLHttpRequest: #{XMLHttpRequest.status}")
          console.log("textStatus: #{textStatus}")
          console.log("errorThrown: #{errorThrown}")
    else
      replaceSelectOptions($selectGrandChildren, [])

  $('.select-parent').on
    'change': replaceChildrenOptions

  $('.select-children').on 
    'change': replaceGrandChildrenOptions

Controller

class SchoolsController < ApplicationController
  def index
    prefecture = Prefecture.find(params[:prefecture_id])
    render json: prefecture.schools.select(:id, :name)
  end
end

class CoursesController < ApplicationController
  def index
    school = School.find(params[:school_id])
    render json: school.courses.select(:id, :name)
  end
end

Model

class User < ApplicationRecord
  belongs_to :prefecture, optional: true
  belongs_to :school, optional: true
  belongs_to :course, optional: true
end

class Prefecture < ApplicationRecord
  has_many :schools, ->{ order(:id) }
end

class School < ApplicationRecord
  belongs_to :prefecture, optional: true
  has_many :courses, ->{ order(:id) }
end

class Course < ApplicationRecord
  belongs_to :school, optional: true
end

Routing

Rails.application.routes.draw do
  resources :users do
   collection do
     get '/:id/school' => 'users#school', as: "school"
   end
  end
  resources :prefectures, only: [] do
    resources :schools, only: :index do
      resources :courses, only: :index
    end
  end
end

##困ってるところ
子カテゴリ(学校)の決定後、
coffeescript内のconsole.log($(this).find('option:selected').data().grandchildrenPath);
がundefinedとなり、孫のカテゴリ(学科)が変化しない。

お詳しい方、ぜひともご教授ください。
よろしくお願いします。

Answer 1

ERBの中で<% school_options = schools.map { |s| [s.name,s.id , data: { grandchildren_path: prefecture_school_courses_path(s) }] } %>のようにしてdata属性を追加していますが、これはあくまでサーバーサイドで生成されるoptionです。

都道府県のオプションが変更されるとJS内で動的に学校のoptionが作成されます。このときにはdata属性が付かないので、grandchildrenPathの情報も当然取得できなくなってしまいます。

というわけで、以下のような対応方針を取るのはどうでしょうか。

• 学校のJSONを返すときにgrandchildrenPathに相当する情報も一緒に返す
• JS内で動的にoptionを作成する際に、data属性も一緒に付与する

class SchoolsController < ApplicationController
  def index
    prefecture = Prefecture.find(params[:prefecture_id])
    schools = prefecture.schools.map do |school|
      {
      	id: school.id,
      	name: school.name,
      	# pathの情報も付与する
      	path: prefecture_school_courses_path(school)
      }	
    end
    render json: schools
  end
end

  replaceSelectOptions = ($select, results) ->
    $select.html $('<option>')
    $.each results, ->
      option = $('<option>').val(this.id).text(this.name)
      # サーバーから返ってきたpath情報をdata属性として付与（pathが返ってきた場合のみ）
      if this.path
        option.data('path', this.path)
      $select.append(option)

なお、replaceSelectOptionsは再利用可能なメソッドになっているため、grandchildrenPathのような具体的なdata属性ではなく汎用的なpathという名前にしてあります。

なので、それに合わせてERBのgrandchildren_pathやgrandchildrenPathもpathに統一しておきましょう。

-<% school_options = schools.map { |s| [s.name,s.id , data: { grandchildren_path: prefecture_school_courses_path(s) }] } %>
+<% school_options = schools.map { |s| [s.name,s.id , data: { path: prefecture_school_courses_path(s) }] } %>

   replaceGrandChildrenOptions = ->
-    grandchildrenPath = $(@).find('option:selected').data().grandchildrenPath
+    grandchildrenPath = $(@).find('option:selected').data().path    

Comments

[taremimi_7]

できましたああああああ！！！！本当に良かった、、、、お忙しい中本当にありがとうございました！???? とても助かりました！改めて本当にありがとうございました！????????????

Answer 2

$(@).find('option:selected')は、都道府県のoptionと大学のoptionをどちらも取得してしまうため、grandchildrenPathがエラーになってしまうのでは？
フォームを増やしたのですから、idなどを追加してそれぞれ絞り込む必要があると思います。

Comments

[taremimi_7]

nameko_moto様
ご回答ありがとうございます！
教えて頂いた通り、
childrenPath = $(@).find('.select-parent option:selected').data().childrenPath
grandchildrenPath = $(@).find('.select-children option:selected').data().grandchildrenPath
としてみましたが、1個目も動かなくなってしまいました。
(もしやり方間違ってたら教えて下さい。。。。)