当用户切换医生下拉选项时，已显示的时间槽不会自动刷新或清空，需通过监听医生选择变化并主动隐藏日期选择器，触发后续逻辑重载。
当用户切换医生下拉选项时，已显示的时间槽不会自动刷新或清空，需通过监听医生选择变化并主动隐藏日期选择器，触发后续逻辑重载。
在当前实现中，时间槽仅在日期被点击（onSelect）时通过 AJAX 加载，而医生选择变更（<select></select> 值改变）并未触发任何响应逻辑，导致界面状态与数据不一致——旧医生的时间槽仍残留，新医生的数据无法及时呈现。
要解决该问题，关键在于：将医生选择变更事件与时间槽的清理/重载逻辑解耦，并确保其独立于日期点击行为。虽然答案中建议使用 $('#datepicker').datepicker("hide") 隐藏日期面板，但这只是辅助操作；真正需要的是清空时间槽内容 + 重置依赖状态，并在必要时（如已有选中日期）主动触发一次更新。
✅ 推荐完整解决方案如下：
-
监听医生
change事件（而非click）：change才能准确捕获值的实际变更，避免误触发； - 清空时间槽容器：立即移除旧内容，提升用户体验；
- 可选：若已有有效日期，自动触发一次 AJAX 更新（增强响应性）；
- （补充）确保日期选择器隐藏：避免视觉干扰，提升一致性。
// 监听医生下拉框值变更
$('#doctor').on('change', function() {
const selectedDoctorId = $(this).val();
// 立即清空时间槽区域
$('#date_field').empty();
// 若当前已有选中日期，且医生已选，则主动获取新时间槽
const selectedDate = $('#date_time').val().trim();
if (selectedDoctorId && selectedDate) {
$.ajax({
url: '= base_url() ?>frontend/get_datetime',
type: 'POST',
data: { date: selectedDate, doctor_id: selectedDoctorId },
success: function(data) {
$('#date_field').html(data);
},
error: function() {
$('#date_field').html('<small class="text-muted">Failed to load time slots.</small>');
}
});
}
// 同时隐藏日期选择器（可选，提升交互一致性）
$('#datepicker').datepicker('hide');
});
⚠️ 注意事项：
- 不要使用
click监听下拉框——用户可能通过键盘操作或快速切换，click无法保证捕获到真实值变更； -
$('#date_time').val()应确保是受控输入（如隐藏域或日期输入框），且格式与后端要求一致（如'yyyy-mm-dd'）； - 若日期尚未选择，清空
#date_field即可，无需额外请求，避免无效 AJAX 调用； - 建议为
#date_field添加加载状态提示（如<div class="loading">Loading...</div>），提升反馈感。
通过以上改进，系统将具备真正的双向响应能力：既支持“选医生 → 点日期 → 显示时段”，也支持“换医生 → 立即清空并按需刷新”，显著提升表单交互的健壮性与专业度。
