页面加载时输入框已有日期值，如何触发pickadate的onSet逻辑并保留选中项？

1. 抽离核心逻辑为独立函数 #

把原本写在onSet事件里的AJAX请求、下拉框填充逻辑单独拎出来，既可以在日期变更时触发，也能在页面初始化时手动调用，避免重复写代码。

// 处理下拉框数据加载与恢复选中状态的核心函数
function loadRelatedDropdown(selectedDate) {
    // 先存一下下拉框当前选中的值
    const originalSelected = $('#你的下拉框ID').val();
    
    // 发起AJAX请求拿数据
    $.ajax({
        url: '你的数据接口地址',
        type: 'GET',
        data: { targetDate: selectedDate },
        success: function(res) {
            // 清空旧选项
            $('#你的下拉框ID').empty();
            // 填充新选项
            res.data.forEach(item => {
                $('#你的下拉框ID').append(`<option value="${item.id}">${item.name}</option>`);
            });
            // 恢复之前选中的选项（如果有值）
            if (originalSelected) {
                $('#你的下拉框ID').val(originalSelected);
            }
        },
        error: function(err) {
            console.log('加载下拉数据出错:', err);
        }
    });
}

2. 初始化picker时触发逻辑 #

在完成pickadate初始化后，检查输入框是否有预填充的日期值，有的话直接调用上面的函数；同时在onSet事件里也调用这个函数处理日期变更的情况。

$(document).ready(function() {
    // 初始化pickadate插件
    const datePicker = $('#gameDate3').pickadate({
        format: 'yyyy-mm-dd', // 你的日期格式
        selectYears: true,
        selectMonths: true,
        // 你的其他配置：禁用日期、日期范围等
        onSet: function(context) {
            // 只有当用户主动选择日期时触发
            if (context.select) {
                const chosenDate = this.get('select', 'yyyy-mm-dd');
                loadRelatedDropdown(chosenDate);
            }
        }
    });

    // 获取picker实例，同步预填充值的状态
    const pickerInstance = datePicker.pickadate('picker');
    const prefilledValue = $('#gameDate3').val();

    // 页面加载时如果有预填充日期，直接触发逻辑
    if (prefilledValue) {
        loadRelatedDropdown(prefilledValue);
        // 同步picker内部状态，避免显示和输入框值不一致
        pickerInstance.set('select', prefilledValue, { format: 'yyyy-mm-dd' });
    }
});

关键注意点 #

• 抽离函数是为了避免重复代码，同时让初始化时的触发逻辑更清晰；
• 提前保存下拉框原选中值，AJAX请求完成后再恢复，就能保证原本选中的选项不会丢失；
• 同步picker实例的状态，是为了避免输入框有值，但picker组件显示不一致的问题。

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