求助：用PHP、JavaScript、JQuery实现MySQL数据源的互斥三下拉选框

1. 后端数据准备（PHP+MySQL） #

先从数据库读取所有名称数据，假设数据表为names，包含id（主键）和name（名称字段）：

<?php
// 数据库连接配置
$host = 'localhost';
$dbname = 'your_database';
$username = 'your_username';
$password = 'your_password';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // 查询所有名称数据
    $stmt = $pdo->query("SELECT id, name FROM names ORDER BY name");
    $names = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch(PDOException $e) {
    die("数据库连接失败: " . $e->getMessage());
}
?>

2. 前端HTML结构 #

渲染三个下拉选框，初始加载所有名称选项：

<select class="name-select" id="select1">
    <option value="">请选择</option>
    <?php foreach($names as $item): ?>
        <option value="<?= $item['id'] ?>"><?= htmlspecialchars($item['name']) ?></option>
    <?php endforeach; ?>
</select>

<select class="name-select" id="select2">
    <option value="">请选择</option>
    <?php foreach($names as $item): ?>
        <option value="<?= $item['id'] ?>"><?= htmlspecialchars($item['name']) ?></option>
    <?php endforeach; ?>
</select>

<select class="name-select" id="select3">
    <option value="">请选择</option>
    <?php foreach($names as $item): ?>
        <option value="<?= $item['id'] ?>"><?= htmlspecialchars($item['name']) ?></option>
    <?php endforeach; ?>
</select>

3. jQuery实现互斥逻辑 #

编写脚本监听下拉框变化，自动隐藏其他选框中已选中的选项：

$(document).ready(function() {
    // 缓存每个下拉框的原始选项，用于每次更新时恢复
    const originalOptions = {};
    $('.name-select').each(function() {
        originalOptions[$(this).attr('id')] = $(this).html();
    });

    // 监听所有下拉选框的change事件
    $('.name-select').on('change', function() {
        // 收集当前所有已选中的有效值（排除空选项）
        const selectedValues = $('.name-select').map(function() {
            return $(this).val() || null;
        }).get().filter(val => val !== null);

        // 遍历每个下拉选框，更新选项显示状态
        $('.name-select').each(function() {
            const currentSelect = $(this);
            const currentId = currentSelect.attr('id');
            const currentVal = currentSelect.val();

            // 先恢复当前选框的所有原始选项
            currentSelect.html(originalOptions[currentId]);
            
            // 隐藏其他选框已选中的选项（排除自身当前选中值）
            selectedValues.forEach(val => {
                if (val !== currentVal) {
                    currentSelect.find(`option[value="${val}"]`).hide();
                }
            });

            // 边界处理：如果当前选中项被其他选框占用导致隐藏，自动重置为空
            if (currentVal && currentSelect.find(`option[value="${currentVal}"]`).is(':hidden')) {
                currentSelect.val('');
            }
        });
    });
});

核心逻辑说明 #

• 原始选项缓存：避免多次操作后选项丢失，每次变化前先恢复完整选项列表再处理隐藏。
• 实时同步状态：任意选框变化时，都会重新收集所有已选值，确保三个选框的互斥规则始终生效。
• 异常状态修正：如果某个选框的选中项被其他选框抢先选中，自动重置为空，避免出现无效选中状态。

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