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

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>

以上です。

Recent Entries

Pickup Categories

Movable Type

CMSとして国内5万サイト以上に導入されている Movable Type に関する記事です。

Craft CMS

CMS 業界で注目の Craft CMS に関する記事です。Craft CMS はチーム全体をハッピーにしてくれる素晴らしい CMS です。