如何将Elementor Repeater字段标题动态设置为选择控件选中项的显示标签

DevOps 小满

2026-10-4

解决方案

你可以通过Elementor编辑器端的JS过滤器实现读取SELECT控件选中项的label值显示，步骤如下：

正常注册Repeater及内部的SELECT控件，示例代码：

$repeater->add_control(
    'custom_select',
    [
        'label' => '测试选择项',
        'type' => \Elementor\Controls_Manager::SELECT,
        'options' => [
            'val_1' => '正式环境',
            'val_2' => '测试环境',
            'val_3' => '灰度环境',
        ],
        'default' => 'val_1',
    ]
);

在Elementor编辑器加载的自定义JS脚本中，注册过滤器处理Repeater标题的渲染逻辑：

elementor.hooks.addFilter( 'elementor/controls/repeater/print_item_title', function( title, item ) {
    // 替换为你自己的SELECT控件字段名
    const targetSelect = 'custom_select';
    // 和PHP中定义的SELECT选项保持完全一致
    const selectLabelMap = {
        'val_1': '正式环境',
        'val_2': '测试环境',
        'val_3': '灰度环境',
    };

    const selectedValue = item.model.get(targetSelect);
    if (selectedValue && selectLabelMap[selectedValue]) {
        title = title.replace(`{{{${targetSelect}}}}`, selectLabelMap[selectedValue]);
    }
    return title;
} );

配置Repeater的title_field参数即可正常使用该字段：

$this->add_control(
    'list',
    [
        'label' => '列表项',
        'type' => \Elementor\Controls_Manager::REPEATER,
        'fields' => $repeater->get_controls(),
        'title_field' => '环境类型：{{{ custom_select }}}',
    ]
);