如何在JavaScript中实现函数间变量传递并配置Mondial Relay组件

问题根源 #

1. 变量作用域错误：你在keyup事件回调里用var input重新声明了局部变量，直接覆盖了全局的input变量，导致外部代码无法获取输入框的实时值。
2. 组件初始化时机问题：页面加载完成就初始化了Mondial Relay组件，此时输入框还没有内容，之后输入框的值变化也不会自动同步到组件的PostCode参数。

修改后的代码 #

<input class="form-control" type="text" name="cp" value="" id="cp" required="required" />
<script>
// 全局变量存储邮编值，设默认值匹配原代码
let cpValue = "6000";

$(document).ready(function(){
    // 监听输入框的输入/按键事件，覆盖所有输入场景（打字、粘贴等）
    $("#cp").on("input keyup", function(){
        cpValue = $(this).val().trim();
        // 实时更新组件的邮编参数
        updateRelayPostCode(cpValue);
    });

    // 初始化Mondial Relay组件
    $("#Zone_Widget").MR_ParcelShopPicker({                      
        Target: "#Target_Widget",
        TargetDisplay: "#TargetDisplay_Widget",
        TargetDisplayInfoPR: "#TargetDisplayInfoPR_Widget",
        Brand: "BDTEST  ",
        Country: "BE",
        PostCode: cpValue, // 用全局变量的初始值
        Responsive: true,
        AllowedCountries: "FR,BE,NL,LU",
        // 可选：补充选中回调逻辑
        OnParcelShopSelected: function(selectedData) {
            // 处理选中自提点后的逻辑，比如打印信息
            console.log("选中的自提点：", selectedData);
        }
    });
});

// 更新组件邮编的函数
function updateRelayPostCode(postCode) {
    // 调用Mondial Relay插件的标准更新API
    $("#Zone_Widget").MR_UpdateWidget({
        PostCode: postCode
    });
    
    // 如果MR_UpdateWidget不存在，可尝试销毁后重新初始化（备选方案）
    // $("#Zone_Widget").MR_DestroyWidget();
    // $("#Zone_Widget").MR_ParcelShopPicker({ /* 重新传入所有参数，PostCode替换为postCode */ });
}
</script>

关键说明 #

• 用let声明全局的cpValue，避免变量作用域冲突，确保外部代码能访问到实时值。
• 改用input+keyup事件监听，覆盖更多输入场景（比如鼠标粘贴、输入法联想输入）。
• 每次输入变化时调用插件的MR_UpdateWidget方法（这是Mondial Relay插件的官方更新API），实时同步邮编到组件；如果该方法不可用，再考虑销毁组件后重新初始化。

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