如何在选中两个combo box元素时生成通知及实现拒绝记录校验

嘿，我来帮你梳理下具体的实现步骤，刚好之前做过类似的需求，分几块来落地就行：

首先得建一张表来存被拒绝的组合信息，核心要存三个关键内容：选中的Name值、选中的Project值，以及这个组合的拒绝标记（其实因为是点击Reject才触发存储，所以只要这条记录存在，就代表该组合已被拒绝）。

重点要给selected_name和selected_project加联合唯一约束，这样既不会重复存储相同的拒绝组合，也能让后续查询更高效。举个SQL表的创建示例：

CREATE TABLE rejected_combinations (
    id INT AUTO_INCREMENT PRIMARY KEY,
    selected_name VARCHAR(255) NOT NULL,
    selected_project VARCHAR(255) NOT NULL,
    rejected_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    UNIQUE KEY unique_combination (selected_name, selected_project)
);

当用户勾选Reject复选框触发操作时，咱们要按以下步骤来：

• 先获取Name和Project下拉框的选中值（比如通过document.getElementById('Name').value这类方式）
• 把这两个值传给后端接口，后端会自动标记该组合为已拒绝（因为只有点击Reject才会调用这个接口）
• 后端接收到数据后，先检查这个组合是否已存在（利用唯一约束，也可以直接插入并捕获重复键异常），不存在就插入记录；如果已存在，就返回提示给前端
• 存储成功后，再执行你已经实现的下拉框禁用/只读逻辑

举个前端JS的简单示例：

document.getElementById('Reject').addEventListener('change', function(e) {
    if (e.target.checked) {
        const selectedName = document.getElementById('Name').value;
        const selectedProject = document.getElementById('Project').value;

        // 先验证两个下拉框都已选中
        if (!selectedName || !selectedProject) {
            alert('请先选择名称和项目');
            e.target.checked = false;
            return;
        }

        // 调用后端接口存储拒绝组合
        fetch('/api/save-rejected', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name: selectedName,
                project: selectedProject
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 执行你已有的禁用逻辑
                document.getElementById('Name').disabled = true;
                document.getElementById('Project').disabled = true;
            } else if (data.message === '已存在') {
                alert('该名称已被拒绝');
                e.target.checked = false;
            }
        })
        .catch(err => console.error('存储失败:', err));
    }
});

要实现“下次选中相同组合时提示”，咱们需要在用户操作下拉框时，实时检查该组合是否已被拒绝：

• 给Name和Project下拉框绑定change事件
• 每当两个下拉框都有选中值时，调用后端接口查询数据库中是否存在对应的拒绝记录
• 如果存在，立刻弹出提示“该名称已被拒绝”，还可以提前禁用Reject复选框或者下拉框，避免用户重复操作

前端示例代码：

function checkRejectedStatus() {
    const selectedName = document.getElementById('Name').value;
    const selectedProject = document.getElementById('Project').value;

    if (selectedName && selectedProject) {
        fetch(`/api/check-rejected?name=${encodeURIComponent(selectedName)}&project=${encodeURIComponent(selectedProject)}`)
        .then(response => response.json())
        .then(data => {
            if (data.isRejected) {
                alert('该名称已被拒绝');
                // 可选：禁用Reject按钮或下拉框，提升体验
                document.getElementById('Reject').disabled = true;
            } else {
                document.getElementById('Reject').disabled = false;
            }
        });
    }
}

// 给两个下拉框绑定状态检查事件
document.getElementById('Name').addEventListener('change', checkRejectedStatus);
document.getElementById('Project').addEventListener('change', checkRejectedStatus);

后端主要负责两个接口：

• 存储接口：接收Name和Project，尝试插入到rejected_combinations表，若遇到唯一键冲突（说明已存过），则返回“已存在”提示
• 查询接口：接收Name和Project，查询表中是否存在对应记录，返回布尔值结果

举个简单的Node.js/Express示例：

// 存储拒绝组合的接口
app.post('/api/save-rejected', async (req, res) => {
    const { name, project } = req.body;
    try {
        await db.query(
            'INSERT INTO rejected_combinations (selected_name, selected_project) VALUES (?, ?)',
            [name, project]
        );
        res.json({ success: true });
    } catch (err) {
        // 捕获MySQL唯一键冲突错误（错误码1062），其他数据库需对应调整
        if (err.code === 'ER_DUP_ENTRY') {
            res.json({ success: false, message: '已存在' });
        } else {
            res.status(500).json({ success: false, message: '存储失败' });
        }
    }
});

// 查询组合是否已被拒绝的接口
app.get('/api/check-rejected', async (req, res) => {
    const { name, project } = req.query;
    const [rows] = await db.query(
        'SELECT * FROM rejected_combinations WHERE selected_name = ? AND selected_project = ?',
        [name, project]
    );
    res.json({ isRejected: rows.length > 0 });
});

这样一套流程下来，既实现了组合信息与拒绝状态的存储，也能在用户选中重复组合时及时触发提示，同时保留你之前实现的下拉框禁用逻辑~

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