Craft CMS でドロップダウンフィールドの設定を利用してフロント側で select 要素を書き出す
Craft CMS でドロップダウンフィールドの設定から select 要素を書き出す方法をご紹介します。
Craft CMS で下記のような設定のドロップダウンフィールドを作成したとします。フィールドのハンドルは player です。
これを元にして、公開側で select を書き出す方法をご紹介します。検索フォームを作るときなどに便利だと思います。
テンプレートを実装
テンプレートは下記のようになります。
{% set playerField = craft.app.fields.getFieldByHandle('player') %}
<select name="player" id="player">
{% for option in playerField.settings.options %}
<option value="{{ option.value }}">{{ option.label }}</option>
{% endfor %}
</select>craft.app.fields.getFieldByHandle('player') でフィールドの情報を取得し、 .settings.options で選択肢の情報を取得します。
なお、Craft 2 までは、
craft.fields.getFieldByHandle('player')
だったのが、Craft 3 から、
craft.app.fields.getFieldByHandle('player')
となりました（詳しくは「Upgrading from Craft 2 | Craft CMS Documentation | 3.x」参照）。
出力される HTML は下記のようになります。
<select name="player" id="player">
<option value="baggio">ロベルト・バッジョ</option>
<option value="cruyff">ヨハン・クライフ</option>
<option value="zico">ジーコ</option>
</select>
Published 2018-02-22
, Updated 2024-02-21
, Updated 2024-02-21
⚡️ 話題の一冊 ⚡️
