OctoberCMSのフォーム画面（create,updateの画面）で、プルダウンの選択をトリガーにして、他のプルダウンのリストを変更する方法を紹介します。

環境

• Laravel：5.5
• October CMS：1.0

実装方法

OctoberCMSでフォーム画面を構成する際、必要になるファイルが「fields.yml」です。一般的には以下の場所にあるかと思います。

plugins/
　casareal/ <=== 作者名
　　test/ <=== プラグイン名
     models/
       FormTest.php
       form_test/
         fields.yml

この「fields.yml」に各フィールドを記載していくことでフォーム画面を構成することができます。
今回は都道府県を選んだら、市区町村のリストが選択した都道府県に対応して変更されるようにします。
まず都道府県と市区町村用のプルダウンを用意します。

fields:
  prefecture:
    label: 都道府県
    span: auto
    type: dropdown
  city:
    label: 市区町村
    span: auto
    type: dropdown

次に各プルダウンのリストを定義します。
リストは「models」フォルダ内にある「FormTest.php」に定義することができます。
本当はリストの中身が変わらない都道府県のプルダウンは、「fields.yml」に直接リストを定義しても良いのですが、違いが分かりやすいように今回は「FormTest.php」に定義することとします。

public function getPrefectureOptions()
{
    $array = [
      0 => "選択してください",
      1 => "北海道",
      2 => "東京"
    ];
    return $array;
}

public function getCityOptions()
{
    $array[0] = [];
    $array[1] = [
      1 => "札幌市",
      2 => "函館市",
      3 => "石狩市"
    ];
    $array[2] = [
      4 => "新宿区",
      5 => "渋谷区",
      3 => "品川区"
    ];
    
    return $array[$this->prefecture];
}

「get{フィールド名}Options」という配列を返すメソッドを作ると、その配列の内容がリストになります。
「getCityOptions」メソッドでは、都道府県のプルダウンで選択した項目のキーを取得して、返すリストを変更するような作りにしています。
ただ、これだけではまだ動的に変更することはできないので「fields.yml」を以下のように変更します。

fields:
  prefecture:
    label: 都道府県
    span: auto
    type: dropdown
  city:
    label: 市区町村
    span: auto
    type: dropdown
    dependsOn: prefecture

「dependsOn」属性に都道府県のフィールドを指定することで、都道府県に変更があった場合に、「getCityOptions」が再度実行され、リストが変更されます。

これで、都道府県のプルダウン選択時に、市区町村のプルダウンのリストを動的に変更することができるようになりました。

まとめ

今回は2つのプルダウンで解説を行いましたが、「dependsOn」属性には複数フィールドを指定することもできますので、3つ以上のプルダウンを連動させることも可能です。
また、実際にはDBから取ってきた値をリストにしたりするかと思いますので、その場合はDBから取得する際に、変更したプルダウンの値を条件にして取得するといいと思います。

Tweet

Check