Qualtrics问卷JavaScript时间问题返回后选中值丢失的解决咨询

问题根源是页面返回时，没有把Qualtrics已保存的时间值回显到你的自定义时间组件里。只需在addOnReady函数中添加回显逻辑即可解决，修改后的完整代码如下：

Qualtrics.SurveyEngine.addOnload(function() {
    // 页面加载逻辑暂无需改动
});

Qualtrics.SurveyEngine.addOnReady(function() {
    var Qbd = "input[id='QR~" + this.questionId + "']";
    var $timeComponent = jQuery("#appt-time");
    var $qualtricsHiddenInput = jQuery(Qbd);

    // 隐藏Qualtrics原生输入框
    jQuery("#" + this.questionId + " .InputText").hide();

    // 页面加载完成时，把已保存的时间值回显到自定义组件
    var savedTime = $qualtricsHiddenInput.val();
    if (savedTime) {
        $timeComponent.val(savedTime);
    }

    // 用户修改时间时，同步值到Qualtrics的隐藏输入框（保留原有逻辑）
    $timeComponent.on("change", function() {
        $qualtricsHiddenInput.val(jQuery(this).val());
    });
});

Qualtrics.SurveyEngine.addOnUnload(function() {
    // 页面卸载逻辑暂无需改动
});

关键改动说明 #

• 提前获取DOM元素的jQuery对象，避免重复查询DOM，提升性能
• 新增回显逻辑：页面加载时读取Qualtrics已保存的时间值，若存在则直接设置到你的自定义时间组件#appt-time中，返回页面时就能自动显示之前选择的内容
• 保留原有的值同步逻辑，确保用户修改时间时，新值能正确存入Qualtrics系统

注意事项 #

如果你的#appt-time是第三方时间选择器插件（而非原生<input type="time">），可能需要替换成插件对应的赋值方法。比如部分时间插件需要用$timeComponent.timepicker('setTime', savedTime)这类语法来设置值，具体请参照插件文档调整。

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