マルチセレクトボックスフィールド
マルチセレクトボックスフィールドは、複数選択形式の入力を提供します。
# 設定
マルチセレクトボックスフィールドの設定は、次の通りです。
- マルチセレクトボックスのオプション – フィールドで利用可能なオプションを定義します。オプションの値とラベルを別々に設定したり、デフォルトで選択状態にしておくものを選択できます。
# テンプレート記法
# マルチセレクトボックスフィールドによるエレメントの照会
マルチセレクトボックスフィールドを持つエレメントを照会する場合、フィールドのハンドルにちなんで名付けられたクエリパラメータを利用して、マルチセレクトボックスフィールドのデータに基づいた結果をフィルタできます。
利用可能な値には、次のものが含まれます。
値 | 取得するエレメント |
---|---|
'foo' | foo オプションが選択されている。 |
'not foo' | foo オプションが選択さていない。 |
['foo', 'bar'] | foo または bar オプションのいずれかが選択されている。 |
['and', 'foo', 'bar'] | foo と bar オプションが選択されている。 |
{# Fetch entries with the 'foo' option selected #}
{% set entries = craft.entries()
.myFieldHandle('foo')
.all() %}
# マルチセレクトボックスフィールドデータの操作
テンプレート内でマルチセレクトボックスフィールドのエレメントを取得する場合、マルチセレクトボックスフィールドのハンドルを利用して、そのデータにアクセスできます。
{% set value = entry.myFieldHandle %}
それは、フィールドデータを含む craft\fields\data\MultiOptionsFieldData (opens new window) オブジェクトを提供します。
選択されたオプションすべてをループするには、フィールド値を反復してください。
{% for option in entry.myFieldHandle %}
Label: {{ option.label }}
Value: {{ option }} or {{ option.value }}
{% endfor %}
利用可能なオプションすべてをループするには、options (opens new window) プロパティを反復してください。
{% for option in entry.myFieldHandle.options %}
Label: {{ option.label }}
Value: {{ option }} or {{ option.value }}
Selected: {{ option.selected ? 'Yes' : 'No' }}
{% endfor %}
いずれかのオプションが選択されているかを確認するには、length (opens new window) フィルタを利用してください。
{% if entry.myFieldHandle|length %}
特定のオプションが選択されているかを確認するには、contains() (opens new window) を利用してください。
{% if entry.myFieldHandle.contains('foo') %}
# 投稿フォームでマルチセレクトボックスフィールドを保存
マルチセレクトボックスフィールドを含める必要がある投稿フォームがある場合、出発点としてこのテンプレートを利用してください。
{% set field = craft.app.fields.getFieldByHandle('myFieldHandle') %}
{# Include a hidden input first so Craft knows to update the
existing value, if no options are selected. #}
{{ hiddenInput('fields[myFieldHandle]', '') }}
<select multiple name="fields[myFieldHandle][]">
{% for option in field.options %}
{% set selected = entry is defined
? entry.myFieldHandle.contains(option.value)
: option.default %}
<option value="{{ option.value }}"
{% if selected %}selected{% endif %}>
{{ option.label }}
</option>
{% endfor %}
</select>