Craft CMS でドロップダウンフィールドの設定を利用してフロント側で select 要素を書き出す

Craft CMS で下記のような設定のドロップダウンフィールドを作成したとします。フィールドのハンドルは player です。

ドロップダウンの設定

これを元にして、公開側で select を書き出す方法をご紹介します。検索フォームを作るときなどに便利だと思います。

テンプレートを実装

{% set playerField = craft.fields.getFieldByHandle('player') %}
<select name="player" id="player">
{% for option in playerField.settings.options %}
    <option value="{{ option.value }}">{{ option.label }}</option>
{% endfor %}
</select>

テンプレートはこうなります。 craft.fields.getFieldByHandle('player') でフィールドの情報を取得し、 .settings.options で選択肢の情報を取得します。

出力される HTML は下記のようになります。

<select name="player" id="player">
    <option value="baggio">ロベルト・バッジョ</option>
    <option value="cruyff">ヨハン・クライフ</option>
    <option value="zico">ジーコ</option>
</select>

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...