如何在Bootstrap模态框中实现PHP联动下拉列表并保存数据？

我来帮你把联动下拉集成到Bootstrap模态框里，同时实现表单提交保存到数据库的功能。下面是完整的可运行代码，我会一步步解释关键部分：

1. 前端完整代码（index.php） #

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap模态框联动下拉</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <!-- 触发模态框的按钮 -->
    <button type="button" class="btn btn-primary mt-4 ms-4" data-bs-toggle="modal" data-bs-target="#dropdownModal">
        打开联动下拉表单
    </button>

    <!-- Bootstrap模态框 -->
    <div class="modal fade" id="dropdownModal" tabindex="-1" aria-labelledby="dropdownModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="dropdownModalLabel">选择分类与子分类</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="dropdownForm">
                    <div class="modal-body">
                        <!-- 第一个下拉：主分类 -->
                        <div class="mb-3">
                            <label for="mainCategory" class="form-label">主分类</label>
                            <select class="form-select" id="mainCategory" name="main_category" required>
                                <option value="">请选择主分类</option>
                                <!-- 这里可以通过PHP动态渲染初始选项，示例先写静态的 -->
                                <option value="1">电子设备</option>
                                <option value="2">家居用品</option>
                                <option value="3">服饰鞋帽</option>
                            </select>
                        </div>

                        <!-- 第二个下拉：子分类（联动） -->
                        <div class="mb-3">
                            <label for="subCategory" class="form-label">子分类</label>
                            <select class="form-select" id="subCategory" name="sub_category" required disabled>
                                <option value="">请先选择主分类</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">提交保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 主分类变化时触发联动
            $('#mainCategory').on('change', function() {
                const mainCategoryId = $(this).val();
                const subCategorySelect = $('#subCategory');

                // 清空子分类并重置状态
                subCategorySelect.html('<option value="">加载中...</option>').prop('disabled', true);

                if (mainCategoryId) {
                    // 发送AJAX请求获取子分类
                    $.ajax({
                        url: 'get_subcategories.php',
                        type: 'POST',
                        data: { main_category_id: mainCategoryId },
                        dataType: 'json',
                        success: function(response) {
                            if (response.success) {
                                let options = '<option value="">请选择子分类</option>';
                                response.subcategories.forEach(function(item) {
                                    options += `<option value="${item.id}">${item.name}</option>`;
                                });
                                subCategorySelect.html(options).prop('disabled', false);
                            } else {
                                subCategorySelect.html('<option value="">暂无子分类</option>');
                            }
                        },
                        error: function() {
                            subCategorySelect.html('<option value="">加载失败，请重试</option>');
                        }
                    });
                } else {
                    subCategorySelect.html('<option value="">请先选择主分类</option>').prop('disabled', true);
                }
            });

            // 表单提交处理
            $('#dropdownForm').on('submit', function(e) {
                e.preventDefault(); // 阻止默认表单提交

                const formData = $(this).serialize();

                $.ajax({
                    url: 'save_data.php',
                    type: 'POST',
                    data: formData,
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            alert('数据保存成功！');
                            $('#dropdownModal').modal('hide'); // 关闭模态框
                            // 重置表单
                            $('#dropdownForm')[0].reset();
                            $('#subCategory').html('<option value="">请先选择主分类</option>').prop('disabled', true);
                        } else {
                            alert('保存失败：' + response.message);
                        }
                    },
                    error: function() {
                        alert('网络错误，请重试');
                    }
                });
            });

            // 模态框关闭时重置表单状态
            $('#dropdownModal').on('hidden.bs.modal', function() {
                $('#dropdownForm')[0].reset();
                $('#subCategory').html('<option value="">请先选择主分类</option>').prop('disabled', true);
            });
        });
    </script>
</body>
</html>

2. 后端子分类获取脚本（get_subcategories.php） #

这个脚本负责根据主分类ID返回对应的子分类数据，你需要根据自己的数据库表结构调整查询语句：

<?php
// 数据库连接配置（请替换成你的实际信息）
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

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

// 检查连接
if ($conn->connect_error) {
    die(json_encode(['success' => false, 'message' => '数据库连接失败']));
}

if (isset($_POST['main_category_id'])) {
    $mainCategoryId = intval($_POST['main_category_id']);
    
    // 准备查询语句（防止SQL注入）
    $stmt = $conn->prepare("SELECT id, name FROM sub_categories WHERE main_category_id = ?");
    $stmt->bind_param("i", $mainCategoryId);
    $stmt->execute();
    $result = $stmt->get_result();
    
    $subcategories = [];
    while ($row = $result->fetch_assoc()) {
        $subcategories[] = $row;
    }
    
    echo json_encode([
        'success' => true,
        'subcategories' => $subcategories
    ]);
    
    $stmt->close();
} else {
    echo json_encode(['success' => false, 'message' => '缺少主分类ID']);
}

$conn->close();
?>

3. 后端数据保存脚本（save_data.php） #

这个脚本负责接收表单提交的数据并保存到数据库：

<?php
// 数据库连接配置（和上面一致）
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

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

// 检查连接
if ($conn->connect_error) {
    die(json_encode(['success' => false, 'message' => '数据库连接失败']));
}

if (isset($_POST['main_category']) && isset($_POST['sub_category'])) {
    $mainCategory = intval($_POST['main_category']);
    $subCategory = intval($_POST['sub_category']);
    
    // 准备插入语句
    $stmt = $conn->prepare("INSERT INTO selected_categories (main_category_id, sub_category_id, created_at) VALUES (?, ?, NOW())");
    $stmt->bind_param("ii", $mainCategory, $subCategory);
    
    if ($stmt->execute()) {
        echo json_encode(['success' => true, 'message' => '数据保存成功']);
    } else {
        echo json_encode(['success' => false, 'message' => '插入数据失败：' . $stmt->error]);
    }
    
    $stmt->close();
} else {
    echo json_encode(['success' => false, 'message' => '缺少必填参数']);
}

$conn->close();
?>

关键细节说明 #

• 模态框状态重置：在模态框关闭时重置表单和下拉状态，避免下次打开时显示上一次的选择
• AJAX联动逻辑：主分类变化时异步获取子分类，同时处理加载、空数据、错误等状态
• 安全处理：使用预编译语句防止SQL注入，对用户输入进行类型转换
• 表单验证：前端通过required属性做基础验证，后端也做参数检查

你只需要根据自己的数据库表结构，调整两个PHP脚本中的表名、字段名即可运行。

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