如何将Elementor自定义小工具选中控制值作为Repeater选择框的动态选项

Elementor控件默认是后端渲染生成，要实现跨控件的选项联动可以用两种方案，根据你的场景选择即可：

方案1：PHP端静态生成（仅保存后生效，无需额外JS） #

适合不需要实时联动的场景，用户点击保存后Repeater内的选项才会更新：

$property_types = array(
    'type1_slug'=>'type1_label',
    'type2_slug'=>'type2_label',
    'type3_slug'=>'type3_label',
    'type4_slug'=>'type4_label',
    'type5_slug'=>'type5_label',
);

$this->add_control(
    'type_data',
    [
        'label'     => esc_html__( 'Select Types', 'elementor' ),
        'type'      => Controls_Manager::SELECT2,
        'options'   => $property_types,
        'description' => '',
        'multiple' => true,
        'label_block' => true,
        'default' => '',
    ]
);

// 先获取当前已保存的type_data选中值
$selected_types = $this->get_settings('type_data') ?: [];
// 生成tab_holder的选项数组
$tab_options = [];
foreach ($selected_types as $slug) {
    if (isset($property_types[$slug])) {
        $tab_options[$slug] = $property_types[$slug];
    }
}
// 无选中值时默认展示全量选项，可根据需求调整为空
if (empty($tab_options)) {
    $tab_options = $property_types;
}

$repeater = new Repeater();
$repeater->add_control(
    'tab_holder', [
        'label' => esc_html__('select Tabs', 'elementor'),
        'type' => Controls_Manager::SELECT,
        'options' => $tab_options,
        'default' => !empty($selected_types) ? reset($selected_types) : 'type1_slug',
    ]
);

方案2：前端JS动态更新（实时同步，无需提前保存） #

适合需要修改type_data后立刻同步Repeater选项的场景：

1. 先给两个控件添加自定义类名，方便JS定位：

// 修改type_data控件配置，增加classes参数
$this->add_control(
    'type_data',
    [
        'label'     => esc_html__( 'Select Types', 'elementor' ),
        'type'      => Controls_Manager::SELECT2,
        'options'   => $property_types,
        'multiple' => true,
        'label_block' => true,
        'default' => '',
        'classes' => 'custom-type-select', // 新增自定义类
    ]
);

// 修改tab_holder控件配置，增加classes参数
$repeater->add_control(
    'tab_holder', [
        'label' => esc_html__('select Tabs', 'elementor'),
        'type' => Controls_Manager::SELECT,
        'options' => $property_types,
        'default' => 'type1_slug',
        'classes' => 'custom-tab-select', // 新增自定义类
    ]
);

2. 在小工具类中添加资源加载方法，加载自定义JS并传递全量选项到前端：

public function enqueue_scripts() {
    // 替换为你自己的JS文件实际路径
    wp_enqueue_script( 'custom-widget-js', get_stylesheet_directory_uri() . '/js/elementor-widget.js', [ 'jquery' ], '1.0', true );
    // 传递全量选项到JS
    wp_localize_script( 'custom-widget-js', 'widget_config', [
        'all_types' => $property_types
    ] );
}

3. 编写JS代码（写入上述的elementor-widget.js文件）：

jQuery(document).on('change', '.custom-type-select select', function() {
    const selectedSlugs = jQuery(this).val() || [];
    const allTypes = widget_config.all_types;
    let optionHtml = '';
    // 生成新的选项HTML
    selectedSlugs.forEach(slug => {
        if (allTypes[slug]) optionHtml += `<option value="${slug}">${allTypes[slug]}</option>`;
    });
    // 更新所有Repeater内的tab_holder选项
    jQuery('.custom-tab-select select').each(function() {
        const originVal = jQuery(this).val();
        jQuery(this).html(optionHtml);
        // 保留原来的选中值，若已被删除则默认选第一个
        if (selectedSlugs.includes(originVal)) {
            jQuery(this).val(originVal);
        } else if (selectedSlugs.length) {
            jQuery(this).val(selectedSlugs[0]);
        }
    });
});

内容的提问来源于stack exchange，提问作者Crerem