フォームでフィールドの選択結果に応じて別フィールドの選択肢を動的変える

フォームを作成していて、入力を補助する目的で選択肢フィールドを連動したい、ということありますよね。

例えば、”都市”フィールドの選択の中から「東京」を選択したら、”エリア”フィールドの選択肢が23区になり、”都市”フィールドで「横浜」を選択したら、”エリア”の選択肢は横浜の18区がでてくるといったように。

もちろん、マルケトのフォームでできるのですが、ちょっと迷ったところがあったので、共有したいと思います。

ゴールイメージ

東京を選ぶと。。。

横浜を選ぶと。。。

フォームの設定方法

まず、フォーム設定ですが、「都市」フィールドと「エリア」フィールドを用意します。それぞれ、タイプは「選択」にします。

さていきなりですが、ここで一番重要な点を説明します。

「エリア」における選択肢は、都市によって表示される可能性のある全ての選択肢を列挙する必要があります。

すなわち、今回でいうと東京23区と横浜18区の合計41個の選択肢を用意しておかなかればなりません。

エリアの選択肢を、都市の選択項目によって動的に変えるには、エリアフィールドにおいて「表示設定ルール」を設定します。

この表示設定ルールにおいては、「都市で東京が選択されたら23区を、都市で横浜が選択されたら18区を」というように設定します。

この時、表示設定ルールの画面において、候補リスト値に指定する値は、もともとのエリアフィールドの選択肢に持っていた候補全体のなかから該当するもの以外を「削除」することで絞り込む方法でないといけないという点がポイントです。

この画面において、候補リスト値に値を追記しても、実際には選択肢に表示されません。

これで設定終了です。

いかがでしたでしょうか？

参考にしていただければと思います。

おまけ

東京23区のリストと横浜18区のリストを下記に掲載しておきます。

（東京23区）

港区 | 港区

新宿区 | 新宿区

品川区 | 品川区

目黒区 | 品川区

大田区 | 品川区

世田谷区 | 品川区

渋谷区 | 渋谷区

中野区 | 中野区

杉並区 | 杉並区

練馬区 | 練馬区

台東区 | 台東区

墨田区 | 墨田区

江東区 | 江東区

荒川区 | 荒川区

足立区 | 足立区

葛飾区 | 葛飾区

江戸川区 | 江戸川区

千代田区 | 千代田区

中央区 | 中央区

文京区 | 文京区

豊島区 | 豊島区

北区 | 北区

板橋区 | 板橋区

（横浜市）

青葉区 | 青葉区

旭区 | 旭区

泉区 | 泉区

磯子区 | 磯子区

神奈川区 | 神奈川区

金沢区 | 金沢区

港南区 | 港南区

港北区 | 港北区

栄区 | 栄区

瀬谷区 | 瀬谷区

都筑区 | 都筑区

鶴見区 | 鶴見区

戸塚区 | 戸塚区

中区 | 中区

西区 | 西区

保土ケ谷区 | 保土ケ谷区

緑区 | 緑区

南区 | 南区