如何在JavaScript中获取下拉列表选中值并应用于PHP查询

<select class="custom-select" name="listid" onchange="getdll(this.value)">
    <option value="0"></option>
    <?php
    // PHP代码用于从数据库加载第一个下拉列表的选项
    $hall_qry = $conn->query("SELECT * FROM `office_hall` WHERE o_id !=0  order by `office_name` asc");
    while ($row = $hall_qry->fetch_assoc()) : ?>
        <option value="<?php echo $row['o_id'] ?>"><?php echo $row['office_name'] ?></option>
    <?php endwhile; ?>
</select>

<script>
    function getdll(val) {
        // 更新一个显示标签，用于调试或用户反馈
        document.getElementById('lblmess').innerHTML = "您选择了ID: " + val;
        console.log("选中的值是: ", val);

        // 接下来，我们将使用这个val值来向后端请求数据
        // ... (AJAX请求部分将在下一节介绍)
    }
</script>

<form name="formid">
    <!-- 第一个下拉列表：选择办公厅 -->
    <select class="custom-select" name="listid" onchange="getdll(this.value)">
        <option value="0">-- 请选择办公厅 --</option>
        <?php
        $hall_qry = $conn->query("SELECT * FROM `office_hall` WHERE o_id !=0  order by `office_name` asc");
        while ($row = $hall_qry->fetch_assoc()) : ?>
            <option value="<?php echo $row['o_id'] ?>"><?php echo $row['office_name'] ?></option>
        <?php endwhile; ?>
    </select>
    <br><br>
    <!-- 第二个下拉列表：动态显示会议室 -->
    <select class="custom-select" id="roomList">
        <option value="0">-- 请先选择办公厅 --</option>
    </select>
    <label id="lblmess"></label>
</form>

<script>
    function getdll(selectedOfficeId) {
        document.getElementById('lblmess').innerHTML = "正在加载会议室...";
        console.log("选中的办公厅ID: ", selectedOfficeId);

        // 如果选择的是默认项（例如0），则清空会议室列表
        if (selectedOfficeId === "0") {
            const roomList = document.getElementById('roomList');
            roomList.innerHTML = '<option value="0">-- 请先选择办公厅 --</option>';
            document.getElementById('lblmess').innerHTML = "";
            return;
        }

        // 使用fetch API发送POST请求到后端PHP脚本
        fetch('get_rooms.php', { // 'get_rooms.php' 是处理请求的后端脚本文件
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'office_id=' + selectedOfficeId // 将选中值作为请求体发送
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应不正常');
            }
            return response.json(); // 解析JSON格式的响应
        })
        .then(data => {
            const roomList = document.getElementById('roomList');
            roomList.innerHTML = ''; // 清空现有选项

            if (data.length > 0) {
                // 添加默认选项
                const defaultOption = document.createElement('option');
                defaultOption.value = "0";
                defaultOption.textContent = "-- 请选择会议室 --";
                roomList.appendChild(defaultOption);

                // 遍历数据并添加新的选项
                data.forEach(room => {
                    const option = document.createElement('option');
                    option.value = room.id; // 假设后端返回的数据有id和name字段
                    option.textContent = room.room_name;
                    roomList.appendChild(option);
                });
                document.getElementById('lblmess').innerHTML = "会议室加载完成。";
            } else {
                const noOption = document.createElement('option');
                noOption.value = "0";
                noOption.textContent = "-- 没有可用会议室 --";
                roomList.appendChild(noOption);
                document.getElementById('lblmess').innerHTML = "没有找到相关会议室。";
            }
        })
        .catch(error => {
            console.error('获取会议室数据时出错:', error);
            document.getElementById('lblmess').innerHTML = "加载会议室失败。";
        });
    }
</script>

<?php
// get_rooms.php

// 引入数据库连接文件
require_once 'db_connection.php'; // 假设你的数据库连接代码在这个文件里

header('Content-Type: application/json'); // 告诉浏览器响应是JSON格式

// 检查是否收到POST请求以及office_id参数
if (isset($_POST['office_id'])) {
    $officeId = $_POST['office_id'];

    // 使用预处理语句防止SQL注入
    $stmt = $conn->prepare("SELECT `id`, `room_name` FROM `assembly_hall` WHERE `o_id` = ? ORDER BY `room_name` ASC");
    $stmt->bind_param("i", $officeId); // "i" 表示 $officeId 是一个整数
    $stmt->execute();
    $result = $stmt->get_result();

    $rooms = [];
    while ($row = $result->fetch_assoc()) {
        $rooms[] = $row;
    }

    echo json_encode($rooms); // 将结果编码为JSON并输出
    $stmt->close();
} else {
    // 如果没有收到有效的office_id，返回空数组或错误信息
    echo json_encode([]);
}

$conn->close();
?>

<?php
// db_connection.php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 设置字符集
$conn->set_charset("utf8");
?>