实现Bootstrap多选框级联过滤：动态更新选项教程

<?php
// 假设 $con 是一个已建立的数据库连接
// 实际应用中，应使用PDO或MySQLi预处理语句防止SQL注入

/**
 * 从数据库填充危害声明（Hazards）多选框
 * @param mysqli $con 数据库连接对象
 * @return string HTML选项字符串
 */
function fill_hazards_select_box($con)
{
    $output = '';
    $query = mysqli_query($con, "SELECT id, hazards_name FROM Chemilist_states"); // 假设有id和name字段
    while ($row = mysqli_fetch_array($query)) {
        $output .= "<option value='" . htmlspecialchars($row['id']) . "'>" . htmlspecialchars($row['hazards_name']) . "</option>";
    }
    return $output;
}

/**
 * 从数据库填充危害属性（HP Codes）多选框（初始加载或作为AJAX响应）
 * 此函数在实际级联中通常不会直接用于初始填充，而是通过AJAX调用
 * @param mysqli $con 数据库连接对象
 * @param array $hazard_ids 选中的危害ID数组，用于过滤
 * @return string HTML选项字符串
 */
function get_hp_codes_for_hazards($con, $hazard_ids = [])
{
    $output = '';
    if (empty($hazard_ids)) {
        // 如果没有指定危害ID，可以返回所有HP Codes或空
        $query = mysqli_query($con, "SELECT id, hp_code_name FROM Chemilist_hazards");
    } else {
        // 构建安全的IN子句
        $placeholders = implode(',', array_fill(0, count($hazard_ids), '?'));
        $stmt = $con->prepare("SELECT DISTINCT T2.id, T2.hp_code_name FROM Chemilist_hazard_relations T1 JOIN Chemilist_hazards T2 ON T1.hp_code_id = T2.id WHERE T1.hazard_id IN ({$placeholders})");
        if ($stmt) {
            $types = str_repeat('i', count($hazard_ids)); // 假设ID是整数
            $stmt->bind_param($types, ...$hazard_ids);
            $stmt->execute();
            $result = $stmt->get_result();
            while ($row = $result->fetch_assoc()) {
                $output .= "<option value='" . htmlspecialchars($row['id']) . "'>" . htmlspecialchars($row['hp_code_name']) . "</option>";
            }
            $stmt->close();
        }
    }
    return $output;
}

// 示例：用于AJAX请求处理
if (isset($_POST['action']) && $_POST['action'] === 'get_hp_codes' && isset($_POST['hazards'])) {
    // 假设 $con 已经建立
    // require_once 'db_connection.php'; // 引入数据库连接
    $selected_hazards = json_decode($_POST['hazards'], true);
    if (is_array($selected_hazards)) {
        echo get_hp_codes_for_hazards($con, $selected_hazards);
    } else {
        echo ''; // 返回空
    }
    exit;
}
?>

<div class="form-group">
    <label>Hazard Statements: <span class="text-danger">*</span></label><br>
    <select id="hazards" name="hazards[]" class="form-control" multiple="multiple" required>
        <?php echo fill_hazards_select_box($con); ?>
    </select>
</div>

<div class="form-group">
    <label>Hazard Properties: <span class="text-danger">*</span></label><br>
    <select id="hp_codes" name="hp_codes[]" class="form-control" multiple="multiple" required>
        <!-- 初始时可以为空，或加载所有，但最终会通过JS动态更新 -->
        <!-- <?php // echo get_hp_codes_for_hazards($con); ?> -->
    </select>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />

<script>
    $(document).ready(function() {
        $('#hazards').multiselect({
            maxHeight: 300,
            buttonWidth: '505px',
            dropRight: true,
            nonSelectedText: 'Select Hazard Statement(s)',
            includeResetOption: true,
            includeResetDivider: true,
            enableFiltering: true,
            includeFilterClearBtn: true,
            enableCaseInsensitiveFiltering: true,
            // 当选项改变时触发，这是实现级联的关键
            onChange: function(option, checked, select) {
                // 调用处理函数
                updateHpCodes();
            }
        });

        $('#hp_codes').multiselect({
            maxHeight: 300,
            buttonWidth: '505px',
            dropRight: true,
            nonSelectedText: 'Select Hazard Properties',
            includeResetOption: true,
            includeResetDivider: true,
            enableFiltering: true,
            includeFilterClearBtn: true,
            enableCaseInsensitiveFiltering: true,
        });

        // 页面加载时，根据当前hazards的选中状态初始化hp_codes
        updateHpCodes();
    });
</script>

<script>
    // ... (上述jQuery和Multiselect初始化代码) ...

    function updateHpCodes() {
        const selectedHazards = $('#hazards').val(); // 获取所有选中的危害ID数组

        // 禁用hp_codes多选框，提供更好的用户体验
        $('#hp_codes').multiselect('disable');
        $('#hp_codes').multiselect('dataprovider', []); // 清空当前选项
        $('#hp_codes').multiselect('rebuild'); // 重建UI

        if (!selectedHazards || selectedHazards.length === 0) {
            // 如果没有选择任何危害，清空hp_codes并保持禁用
            $('#hp_codes').multiselect('enable'); // 如果需要，可以重新启用
            return;
        }

        // 发送AJAX请求到后端获取过滤后的HP Codes
        $.ajax({
            url: 'db_utils.php', // 你的后端处理脚本URL
            type: 'POST',
            dataType: 'html', // 期望后端返回HTML格式的<option>标签
            data: {
                action: 'get_hp_codes',
                hazards: JSON.stringify(selectedHazards) // 将数组转换为JSON字符串发送
            },
            success: function(response) {
                // 清空hp_codes多选框的旧选项
                $('#hp_codes').empty();
                // 将后端返回的HTML选项添加到hp_codes多选框
                $('#hp_codes').append(response);

                // 重新初始化/刷新Bootstrap Multiselect，使其显示新选项
                $('#hp_codes').multiselect('rebuild');
                $('#hp_codes').multiselect('enable'); // 重新启用
            },
            error: function(xhr, status, error) {
                console.error("Error fetching HP Codes:", status, error);
                // 错误处理，例如显示错误消息
                $('#hp_codes').multiselect('enable'); // 即使出错也尝试启用
            }
        });
    }

    // 确保在页面加载和hazards多选框初始化后立即调用一次，以处理初始状态
    // 已在 $(document).ready() 中添加
</script>

<?php
// db_connection.php (假设你有一个单独的数据库连接文件)
// $con = new mysqli("localhost", "user", "password", "database");
// if ($con->connect_error) { die("Connection failed: " . $con->connect_error); }

// 引入数据库连接文件
require_once 'db_connection.php'; // 请替换为你的数据库连接文件路径

// ... (fill_hazards_select_box 和 get_hp_codes_for_hazards 函数定义如上) ...

if (isset($_POST['action']) && $_POST['action'] === 'get_hp_codes' && isset($_POST['hazards'])) {
    header('Content-Type: text/html; charset=utf-8'); // 确保返回正确的MIME类型和编码

    $selected_hazards_json = $_POST['hazards'];
    $selected_hazards = json_decode($selected_hazards_json, true);

    if (is_array($selected_hazards) && !empty($selected_hazards)) {
        // 使用 get_hp_codes_for_hazards 函数获取过滤后的选项
        echo get_hp_codes_for_hazards($con, $selected_hazards);
    } else {
        echo ''; // 如果没有选择或数据格式错误，返回空
    }
    exit; // 终止脚本执行，只返回选项HTML
}

// ... 其他PHP函数或页面逻辑 ...

$con->close(); // 关闭数据库连接
?>