都道府県に紐づく市町村をドロップダウンで表示させる

備忘録として記録

完成形

先にコードから記載

<%= form_with(model: @current_masseur, url: store_manager_business_trip_ranges_update_path(@current_masseur), method: :patch, local: true) do |f| %>
        <table class="prefecture table table-hover">
            <thead>
              <!--今は東京のみを表示しているがDBには全都道府県が入っている-->
              <%= collection_check_boxes :prefecture, :prefecture_ids, Prefecture.all.where(id: [12, 13, 14]), :id, :name, include_hidden: false do |prefecture| %>
              <tr>
                <th>
                  <div id="menu<%= prefecture.object.id %>">
                    <span class="check_box"><%= prefecture.check_box %></span>
                    <span class="text"><%= prefecture.text %></span>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="city-check-boxes">
                  <div id="city-list<%= prefecture.object.id %>">
                    <%= f.collection_check_boxes :city_ids, City.all, :id, :name, include_hidden: false do |city| %>
                      <% if prefecture.object.id == city.object.prefecture_id %>
                        <ul class="city-check-box">
                            <li class="city-check-box-item">
                            <div id="boxes"><%= city.check_box + city.text %></div>
                            </li>
                        </ul>
                      <% end %>
                    <% end %>
                  </div>
                </td>
              </tr>
              <% end %>
            </tbody>

        </table>
        <div class="actions text-center">
          <%= f.submit "登録する", class: "btn btn-primary mt-5 w-50" %>
        </div>
      <% end %

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>

$(function () {

  // メニュー領域外をクリックしたらメニューを閉じる
  $(function(){
    $("#menu12 .text").on('click', function(){
      $("#city-list12").slideToggle('fast');
    });
  });

  $(function(){
    $('#menu13 .text').on('click', function(){
      $("#city-list13").slideToggle('fast');
    });
  });

  $(function(){
    $('#menu14 .text').on('click', function(){
      $("#city-list14").slideToggle('fast');
    });
  });
});

</script>

ポイントはjqueryのメソッドslideToggleが肝。これを使用するだけでslideDownとslideUpの両方が実装できます。

また$("#menu12 .text")の#menu12。
viewファイルの

<div id="menu<%= prefecture.object.id %>">

から取得したものだが、同じID名がviewファイルに複数あった場合、最初の要素しか取得できない事に注意。
またslideToggleを使用するとドロップダウンはデフォルトで開いた状態になっているので変えたい場合はcssで変更する必要がある。

＊eachで繰り返したID要素は最初の一つしか表示されません。

参考:
http://php.o0o0.jp/article/jquery-dropdown_list
http://www.hp-stylelink.com/news/2013/11/20131122.php
https://teratail.com/questions/21542