select标签onchange触发AJAX筛选jQuery datepicker高亮日期方案

不需要动态替换已执行的脚本，正确实现逻辑为：下拉选项切换时，通过AJAX请求当前选中项对应的符合条件的日期数组，销毁已存在的datepicker实例后，用新的日期数组重新初始化datepicker即可。

1. 前端页面代码调整 #

删除原有冗余的初始化脚本、内联onchange属性，替换为如下代码：

<select id="item" name="item">
  <option value="All">All</option>
  <option value="item1">item1</option>
  <option value="item2">item2</option>
</select>

<input type="text" id="start" name="start" autocomplete="off">

<script>
// 页面加载时默认初始化全量日期的datepicker
loadDatepicker($('#item').val());

// 监听下拉选项切换
$('#item').on('change', function () {
  loadDatepicker($(this).val());
});

// 通用datepicker加载函数
function loadDatepicker(selectedItem) {
  // 请求当前选中项对应的日期列表
  $.get('item.php?q=' + selectedItem, function (res) {
    const dateArr = JSON.parse(res);
    const eventDates = {};
    // 格式化日期为datepicker识别的格式
    dateArr.forEach(item => {
      eventDates[new Date(item)] = new Date(item);
    });
    // 销毁已存在的旧datepicker实例
    if ($('#start').hasClass('hasDatepicker')) {
      $('#start').datepicker('destroy');
    }
    // 用新的日期列表重新初始化datepicker
    $('#start').datepicker({
      dateFormat: "yy-mm-dd",
      beforeShowDay: function (date) {
        const highlight = eventDates[date];
        return highlight ? [true, "event", "Tooltip text"] : [true, "", ""];
      }
    });
  });
}
</script>

2. 后端item.php调整 #

废弃原有的返回脚本逻辑，直接返回JSON格式的日期数组即可，同时添加预处理语句规避SQL注入风险：

<?php
// 这里保留你原有的数据库连接逻辑
$q = $_GET['q'];
$dateList = [];

// 预处理SQL，避免注入风险
if ($q == 'All') {
  $sql = "SELECT `date` FROM `ut_trips` WHERE `deisel` > 0";
  $stmt = $connect->prepare($sql);
} else {
  $sql = "SELECT `date` FROM `ut_trips` WHERE `deisel` > 0 AND `vehicle` = ?";
  $stmt = $connect->prepare($sql);
  $stmt->bind_param("s", $q);
}
$stmt->execute();
$result = $stmt->get_result();

while ($final = $result->fetch_assoc()) {
  $orgDate = date($final['date']);
  $date = str_replace('-"', '/', $orgDate);
  $newDate = date("Y/m/d", strtotime($date));
  $dateList[] = $newDate;
}

// 直接返回JSON格式的日期数组
echo json_encode($dateList);
?>

3. 冗余文件清理 #

原有item.js、js.php文件已经不需要，可以直接删除。

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