【Adalo】選択した都道府県に紐づいた市区町村をドロップダウンに表示する方法

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs株式会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

ノーコードツール「Adalo」でドロップダウンで選択した都道府県に紐づいた市区町村を、ドロップダウンに動的に表示する実装方法を紹介します。

例えば、都道府県ドロップダウンで東京都を選択したときに、東京都の市区町村がドロップダウンの選択肢にセットされるイメージです。

市区町村データではなくても、学校名などを紐づけたい場合にも応用できるかと思います。

Adalo触りたての人でも簡単に実装できるテクニックなのでぜひ試してみてくださいませ!

動画解説バージョンはこちら!

目次
無料で資料をダウンロード

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

  • ノーコード開発会社の選び方
  • EPICsのノーコード受託開発の特徴
  • 支援実績・事例集

    氏名

    法人名

    メールアドレス

    電話番号

    送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

    実装イメージ

    北海道を選択したら、直下のドロップダウンに「札幌市」「函館市」「旭川市」がセットされます。

    ※すべての市区町村を網羅するにはデータ量が多すぎるので上記例では主要な都市などに絞りました。

    今回使用するコンポーネントは以下の通り。

    実装手順

    以下の手順で実装します。

    1. 都道府県のコレクション「Prefecture」を作る
    2. 市区町村のコレクション「Cities」を作る
    3. 都道府県のドロップダウンを設置する
    4. 市区町村のドロップダウンにCustom Filter

    都道府県のコレクション「Prefecture」を作る

    「Prefecture」という名前で47都道府県データを格納するコレクションを作ります。

    都道府県を手入力するのは非常に大変なので、Googleスプレッドシートかなにかで簡素なCSVファイルを作ってそれをインポートして時短でいきましょう。

    データは添付画像のように、北海道から順に1〜47のIDが振られていればOKです!

    市区町村のコレクション「Cities」を作る

    都道府県と紐付ける市区町村のコレクションを「Cities」という名前で作ります。

    「prefecture_id」というフィールドをNumber型で新規追加するのが肝です。都道府県と紐付けるために必須!

    市区町村データは莫大な量になるのでこの記事では主要な市区町村に絞ってCSVデータを以下のような感じでスプレッドシートで作ってAdaloにインポートしました。

    念のため補足すると、市区町村コレクションのprefecture_idが都道府県のIDと同じになります。

    都道府県のドロップダウンを設置する

    データ準備ができたので、Dropdownコンポーネントで都道府県を選択するためのドロップダウンを設置しましょう。

    Menu Optionsはもちろん、先程作ったPrefectureコレクションをセットします。

    並び順は、上から北海道〜沖縄県になるように、Sortingを「ID – Low to High」にします。

    市区町村のドロップダウンにCustom Filter

    仕上げで市区町村を選択するためのドロップダウンを設置。

    Menu Optionsは先程作ったCitiesをセット。

    Custom Filterで、「prefecture_id is equal to Selected Prefecture > ID」という絞り込み条件を設定します。

    この設定をすることで、都道府県ドロップダウンの値が変更された瞬間に該当する市区町村が市区町村ドロップダウンにセットされるようになります!

    お疲れ様でした!

    【日本最大級のノーコード開発実績】
    無料でアプリ・システム開発の相談を受付中

      氏名

      法人名

      メールアドレス

      電話番号

      お問い合わせ詳細 ※分かる範囲でご記入ください

      送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

      「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
      目次