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

本教程详细介绍了如何实现Bootstrap多选框（multiselect）的级联过滤功能。我们将通过一个具体案例，演示如何根据第一个多选框的选中项，动态更新第二个多选框的可用选项，并结合后端数据获取机制。内容涵盖前端事件处理、数据收集、后端接口设计及前端UI刷新等关键步骤，旨在帮助开发者构建交互性更强的表单。

1. 概述与场景需求

在Web开发中，经常会遇到需要实现表单元素之间联动的情况，特别是当选项数量较多时。Bootstrap Multiselect是一个功能丰富的多选插件，本教程将聚焦于如何实现两个Bootstrap Multiselect下拉框的级联过滤。具体场景是：用户在第一个“危害声明（Hazards）”多选框中选择一个或多个项后，第二个“危害属性（HP Codes）”多选框应动态加载并显示与这些选定危害声明关联的所有唯一属性。这些数据通常从后端数据库获取。

2. 前置准备

在开始之前，请确保你的项目已引入以下库：

• Bootstrap 3/4: 用于页面布局和样式。
• jQuery: Bootstrap Multiselect插件的依赖。
• Bootstrap Multiselect Plugin: 用于增强多选下拉框功能。

3. 初始HTML与PHP数据绑定

首先，我们需要在页面上创建两个多选下拉框，并使用PHP从数据库中初始化它们。第一个多选框 (hazards) 预先加载所有危害声明，而第二个多选框 (hp_codes) 最初可以为空或加载所有选项，但最终会根据第一个多选框的选择进行过滤。

PHP后端数据获取示例 (db_utils.php 或类似文件):

<?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;
}
?>

登录后复制

HTML表单结构:

标签： css mysql php javascript word java jquery html js 前端 bootstr