Magento 2.4.6：弹窗下拉框同步首页选中预约时间问题

问题描述 #

在Magento 2.4.6的预约功能中，首页选择预约开始时间后点击「立即预约」，弹窗内的开始时间始终显示默认10:00，无法同步首页选中的时间。已尝试多段jQuery代码，能获取首页下拉框的文本和值，但无法更新弹窗内的下拉框。

问题分析 #

1. 固定延迟的setTimeout不可靠：弹窗加载时间不固定，20秒延迟可能过早或过晚，导致DOM未渲染或已失效。
2. 未正确处理Select2组件：Magento的下拉框通常基于Select2渲染，直接修改原生select的val()或操作option无法同步Select2的UI显示，必须使用Select2的API更新。
3. 事件监听对象错误：部分代码监听了错误元素（如#popup-open的change事件），应先监听首页下拉框的change事件存储值，再监听弹窗打开事件同步数据。

可行解决方案 #

步骤1：存储首页选中的时间信息 #

监听首页时间下拉框的change事件，将选中的value和text存储到全局变量（如需跨页面保留，可改用sessionStorage）。

步骤2：监听弹窗打开事件并同步时间 #

监听「立即预约」按钮的点击事件，在弹窗渲染完成后，使用Select2的API更新弹窗内的时间选择器，同时同步隐藏输入框的值。

完整代码实现 #

<script type="text/javascript">
require([
    'jquery',
    'domReady!'
], function ($) {
    // 存储首页选中的时间值和文本
    var selectedTimeValue = '';
    var selectedTimeText = '';

    // 监听首页时间下拉框的change事件
    $('#start-time').on('change', function() {
        selectedTimeValue = $(this).val();
        selectedTimeText = $(this).find('option:selected').text();
        // 如需跨页面保留，可启用以下代码
        // sessionStorage.setItem('selectedTimeValue', selectedTimeValue);
        // sessionStorage.setItem('selectedTimeText', selectedTimeText);
    });

    // 监听「立即预约」按钮点击（替换为实际按钮的选择器）
    $('#book-now-button').on('click', function() {
        // 短延迟确保弹窗DOM渲染完成
        setTimeout(function() {
            var popupSelect = $('#start-time-selector_0');
            if (popupSelect.length && selectedTimeValue) {
                // 更新原生select的值
                popupSelect.val(selectedTimeValue);
                // 触发Select2的change事件，同步UI显示
                popupSelect.trigger('change');
                // 更新隐藏输入框的值
                $('input[name="start_time[0]"]').val(selectedTimeValue);
                // 手动更新Select2容器文本（可选，trigger change一般已足够）
                $('#select2-start-time-selector_0-container').text(selectedTimeText);
            }
        }, 500); // 可根据弹窗实际加载速度调整延迟时间
    });
});
</script>

关键说明 #

• 替换按钮选择器：将#book-now-button替换为实际「立即预约」按钮的ID或类选择器。
• Select2事件触发：trigger('change')是核心操作，能让Select2组件感知值的变化并更新UI。
• 短延迟替代长延迟：500毫秒的短延迟更贴合实际弹窗加载速度，避免无效等待或DOM未就绪问题。
• 调试技巧：若仍不生效，可在setTimeout内添加console.log(popupSelect.length)确认弹窗元素是否已加载，或检查Select2的初始化状态。

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