如何参照官方文档语法在Twig中正确创建select下拉选择框

开发者阿泽

2026-8-30

Craft CMS 用tag()函数渲染select下拉框实现方案

问题原因

核心为参数使用场景混淆：

Craft 内核自带的tag()是通用HTML标签生成函数，默认会将传入的属性对象中，除text/html外的所有键值对直接解析为标签的行内属性，不会自动识别options字段生成子节点，这就是你代码中options被序列化为属性值输出的根本原因。
你参考文档里的options配置项，是contact-form插件后台定义表单字段的专用参数，不适用于前端Twig模板直接调用tag()的场景。

正确实现方式

完全保留tag()方法的属性动态绑定能力（比如错误状态class、表单属性自动处理），同时正确渲染下拉选项，只需要通过text参数传入子节点内容即可，text支持传入字符串、数组形式的多个子标签。

基础单选项写法

{{
  tag(
    'select',
    {
      id: 'type',
      name: 'message[type]',
      class: message and message.hasErrors('message.type') ? 'error',
      text: [
        tag('option', {value: '', text: '请选择类型'}),
        tag('option', {value: 'option1', text: 'option1'})
      ]
    }
  )
}}

批量选项+回显写法

如果选项较多，可以先定义选项数组，通过map方法批量生成option子节点，同时绑定选中状态实现表单提交失败后的回显：

{% set selectOptions = [
  { label: '选项1', value: 'option1' },
  { label: '选项2', value: 'option2' },
  { label: '选项3', value: 'option3' }
] %}

{{
  tag(
    'select',
    {
      id: 'type',
      name: 'message[type]',
      class: message and message.hasErrors('message.type') ? 'error',
      text: selectOptions.map(opt => tag('option', {
        value: opt.value,
        text: opt.label,
        selected: message is defined and message.type == opt.value
      }))
    }
  )
}}