当用户切换医生下拉选项时，需立即清空并重新加载对应日期的时间段列表，避免残留旧数据；可通过监听医生选择变化事件并主动隐藏日期选择器、清空显示区域来实现即时响应。
当用户切换医生下拉选项时，需立即清空并重新加载对应日期的时间段列表，避免残留旧数据；可通过监听医生选择变化事件并主动隐藏日期选择器、清空显示区域来实现即时响应。
在当前实现中，时间槽仅在日期被点击（onSelect）时通过 AJAX 加载，而医生切换（<select></select> 值变更）未触发任何更新逻辑，导致界面状态与数据不一致。要解决该问题，不能仅依赖 click 事件（如答案中所示），而应监听 change 事件——因为用户可能通过键盘操作、快捷键或鼠标快速切换选项，click 并不能可靠捕获值的实际变更。
✅ 正确做法是：为医生下拉框绑定 change 事件，在其中清空时间槽容器、重置关联状态，并可选地自动触发一次“伪日期选择”（若已有有效日期），以实现无缝刷新：
// 监听医生选择变更
$('#doctor').on('change', function() {
const doctorId = $(this).val();
const selectedDate = $('#date_time').val(); // 假设隐藏输入框存储已选日期
// 立即清空时间槽区域，避免视觉残留
$('#date_field').empty();
// 若已有有效日期且医生已选定，则主动请求新时间段
if (selectedDate && doctorId) {
$.ajax({
url: '= base_url() ?>frontend/get_datetime',
type: 'POST',
data: { date: selectedDate, doctor_id: doctorId },
dataType: 'html',
success: function(data) {
$('#date_field').html(data);
},
error: function() {
$('#date_field').html('<small class="text-muted">暂无可用时段</small>');
}
});
}
});
⚠️ 注意事项：
-
避免重复绑定：确保该
change事件只绑定一次（例如放在 DOM Ready 回调内），防止多次初始化导致重复请求； -
日期有效性校验：
$('#date_time').val()可能为空或格式非法，建议增加正则验证（如/^\d{4}-\d{2}-\d{2}$/）； -
用户体验优化：可添加 loading 状态（如
$('#date_field').html('<div class="spinner-border spinner-sm"></div>');），提升反馈感； -
datepicker 隐藏非必需：
datepicker("hide")仅用于收起弹出层，不影响数据刷新逻辑；若日期面板已关闭，调用它无副作用，但非解决问题的核心——核心在于主动触发 AJAX 更新。
综上，关键改进在于将“医生变更”视为主动触发数据刷新的独立事件源，而非被动等待日期点击。这使交互更符合用户直觉，显著提升表单流程的健壮性与专业性。
