PHP无刷新跨文件传值：关联选中时段与医生排班ID

1. 修正fetch.php的语法错误 #

原代码拼接时段文本时存在语法错误，导致输出异常，修正后：

<?php
// 假设$result是已执行的数据库查询结果（获取所有可用时段）
$out='';
while($row = mysqli_fetch_assoc($result)) {
    // 修正字符串拼接，确保时段范围正确输出
    $out .= '<option value="'.$row["jam_mulai"].'">' . $row["jam_mulai"] . '-' . $row["jam_berakhir"] . '</option>'; 
} 
echo $out;
?>

2. 在input.php中实现无刷新交互逻辑 #

2.1 调整页面结构，新增时段选择下拉框 #

在医生选择框前添加时段选择控件，同时修改医生下拉框的初始化逻辑，存储医生ID用于后续匹配：

<!-- 时段选择下拉框 -->
<select class="form-control select2" name="jam_praktek" style="width: 100%;" id="jam_praktek">
    <option value="" selected="true" disabled="disabled">Pilih Jam Praktek</option>
    <?php
    // 直接查询所有可用时段（也可通过AJAX调用fetch.php加载）
    $query_jam = mysqli_query($koneksi, "SELECT DISTINCT jam_mulai, jam_berakhir FROM jadwal_praktek WHERE status='Aktif'");
    while ($row_jam = mysqli_fetch_assoc($query_jam)) {
        echo '<option value="'.$row_jam["jam_mulai"].'">'.$row_jam["jam_mulai"].'-'.$row_jam["jam_berakhir"].'</option>';
    }
    ?>
</select>

<!-- 医生选择下拉框 -->
<select class="form-control select2" name="nama_dokter" style="width: 100%;" id="nama_dokter">
    <option value="" selected="true" disabled="disabled">Pilih Dokter</option>
    <?php
    // 只查询医生基础信息，避免GROUP BY丢失多时段数据
    $query_dokter = mysqli_query($koneksi, "SELECT dokter.id, dokter.nama_dkt FROM dokter 
                                            JOIN jadwal_praktek ON dokter.id=jadwal_praktek.dokter_id 
                                            WHERE jadwal_praktek.status='Aktif' GROUP BY dokter.id");
    while ($data = mysqli_fetch_array($query_dokter)){
    ?>  
        <option data-dokter-id="<?php echo $data['id'];?>" value="">
            <?php echo $data['nama_dkt'];?>
        </option>
    <?php } ?>
</select>

2.2 添加JavaScript实现无刷新更新 #

引入jQuery并监听时段选择事件，通过AJAX获取对应时段的排班数据，动态更新医生选项的value：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 监听时段选择变化
    $('#jam_praktek').change(function() {
        var selectedJam = $(this).val();
        if (selectedJam) {
            // AJAX请求该时段对应的排班数据
            $.ajax({
                url: 'get_doctors_by_time.php',
                type: 'POST',
                data: {jam_mulai: selectedJam},
                dataType: 'json',
                success: function(response) {
                    // 遍历医生选项，匹配并更新对应的jadwal_id
                    $('#nama_dokter option').each(function() {
                        var dokterId = $(this).data('dokter-id');
                        var matchedJadwal = response.find(item => item.dokter_id == dokterId);
                        $(this).val(matchedJadwal ? matchedJadwal.id_jadwal : '');
                    });
                },
                error: function() {
                    alert('Gagal memuat data dokter');
                }
            });
        } else {
            // 未选择时段时清空所有医生选项的value
            $('#nama_dokter option').not(':first').val('');
        }
    });
});
</script>

3. 新增get_doctors_by_time.php接口 #

该接口负责接收选中的时段，返回对应时段的医生排班关联数据：

<?php
// 数据库连接（请根据实际配置修改）
$koneksi = mysqli_connect('localhost', 'username', 'password', 'database_name');
if (!$koneksi) {
    die('Database connection failed: ' . mysqli_connect_error());
}

// 过滤输入防止SQL注入
$jam_mulai = mysqli_real_escape_string($koneksi, $_POST['jam_mulai']);

// 查询该时段的有效排班记录
$query = mysqli_query($koneksi, "SELECT dokter_id, id_jadwal FROM jadwal_praktek WHERE jam_mulai='$jam_mulai' AND status='Aktif'");

$response = [];
while ($row = mysqli_fetch_assoc($query)) {
    $response[] = $row;
}

// 返回JSON格式数据
header('Content-Type: application/json');
echo json_encode($response);

mysqli_close($koneksi);
?>

关键说明 #

• 原input.php中的GROUP BY dokter_id会丢失同一医生的多时段排班数据，因此初始化时仅查询医生基础信息，后续通过AJAX动态匹配时段对应的排班ID。
• 使用data-dokter-id属性存储医生ID，方便JavaScript快速匹配排班数据。
• 通过AJAX异步请求实现无刷新交互，确保用户体验流畅。

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