Rails jQuery 二段階selectについて

下記コードで、地域を選択後に、
地域に見合った２段目のフォームを出現させたいです。
1つめのフォームで関東を選択したら関東の選択フォームを、
中部を選択したら中部の選択フォームを出現したいです。

下記jqueryのコードで、
hideは効いているのですが、
area選択で選択しても該当フォームのfadeInが起こりません。

どうしたら２段階selectが実現できますでしょうか？

ruby
1  <div class="field">
2    <%= f.label :area %><br />
3    <%= f.select :area,  [
4      ['関東'],['中部']
5    ],
6      { include_blank: '地域を選択してください'},
7      id: "area"
8       %>
9  </div>
10
11  <div class="field">
12    <%= f.select :prefecture,[
13      # 関東
14      ['東京'],['千葉'],['神奈川'],['埼玉'],['栃木'],['群馬'],['茨城']
15    ],
16      { include_blank: '県を選択してください'},
17      id: "prefecture-kanto"
18       %>
19  </div>
20
21  <div class="field">
22    <%= f.select :prefecture,[
23      # 中部
24      ['新潟'],['富山'],['石川'],['福井'],['長野'],['岐阜'],['山梨'],['静岡'],['愛知']
25    ],
26      { include_blank: '県を選択してください'},
27      id: "prefecture-tyubu"
28       %>
29  </div>

jquery
1$(document).on('turbolinks:load', function() {
2
3  //新規登録ページ
4  //地域選択後、県選択表示
5  $('#prefecture-kanto').hide();
6  $('#prefecture-tyubu').hide();
7    var cat = $('#area').val();
8    if(cat == '関東'){
9      $('#prefecture-kanto').fadeIn();
10    }
11    if(cat == '中部'){
12      $('#prefecture-tyubu').fadeIn();
13    }
14
15});

行動規範の内容に同意します

回答1件

自己解決

下記コードで解決できました。
ありがとうございました。

ruby
1  <div class="field">
2    <%= f.label :area %><br />
3    <%= f.select :area,  [
4      ['非公開'],['関東'],['中部'],['近畿'],['中国'],['四国'],['九州'],['東北'],['北海道']
5    ],
6      { include_blank: '地域を選択してください'},
7      id: "area"
8       %>
9  </div>
10
11  <div id="prefecture-kanto" class="field">
12    <%= f.select :prefecture,[
13      # 関東
14      ['東京'],['千葉'],['神奈川'],['埼玉'],['栃木'],['群馬'],['茨城']
15    ],
16      { include_blank: '県を選択してください'}
17       %>
18  </div>
19
20  <div id="prefecture-tyubu" class="field">
21    <%= f.select :prefecture,[
22      # 中部
23      ['新潟'],['富山'],['石川'],['福井'],['長野'],['岐阜'],['山梨'],['静岡'],['愛知']
24    ],
25      { include_blank: '県を選択してください'}
26       %>
27  </div>

jauery
1//初回読み込み、リロード、ページ切り替えで動く。
2$(document).on('turbolinks:load', function() {
3
4
5  //新規登録ページ
6  //地域選択後、県選択表示
7  $('#prefecture-kanto').hide();
8  $('#prefecture-tyubu').hide();
9
10
11});
12
13
14//新規登録ページ
15//地域選択後、県選択表示
16$(document).on('change', '#area', function() {
17  var cat = $('#area').val();
18  if(cat == '関東'){
19    $('#prefecture-kanto').fadeIn();
20  }
21  if(cat == '中部'){
22    $('#prefecture-tyubu').fadeIn();
23  }
24});