当doctor_id属性变更时如何更新Ajax？解决预约时段不刷新问题

要实现切换医生时自动更新或清空预约时段，给医生选择框添加change事件监听，触发对应逻辑即可：

1. 清空当前时段：切换医生时先清空展示时段的date_field内容，避免旧数据残留
2. 重新请求时段（若已选日期）：如果用户之前选过日历日期，就用新医生ID和已选日期重新发送AJAX请求，获取该医生对应日期的可用时段

修改后的完整JavaScript代码如下：

// 日历日期选择逻辑
$('#datepicker').datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect: function(dateText, inst) { 
        $('#date_time').val(dateText);
        fetchAvailableSlots(dateText, $(".doctor_id").val());
    },
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
});

// 封装获取时段的函数，方便复用
function fetchAvailableSlots(date, doctorId) {
    if (!doctorId || !date) return; // 医生或日期未选时不发起请求
    $.ajax({
        url:'<?= base_url() ?>frontend/get_datetime',
        type: 'POST',
        data: {date: date, doctor_id: doctorId},
        success: function (data) {
            $("#date_field").html(data);
        }
    });
}

// 医生选择框切换事件
$(".doctor_id").on('change', function() {
    const selectedDoctorId = $(this).val();
    const selectedDate = $('#date_time').val();
    
    // 先清空当前显示的时段
    $("#date_field").html('');
    
    // 如果已选日期，重新获取新医生的可用时段
    if (selectedDate && selectedDoctorId) {
        fetchAvailableSlots(selectedDate, selectedDoctorId);
    }
});

代码说明 #

• 将原AJAX请求逻辑封装成fetchAvailableSlots函数，选日期和切换医生时可复用，减少重复代码
• 给医生选择框绑定change事件，切换时先清空时段区域，再判断是否有已选日期，有则重新请求新医生的时段
• 增加参数校验，确保医生ID和日期都有效时才发送请求，避免无效请求

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