如何禁止下拉框重复选择产品、批次、存储的相同组合选项

实现思路 #

• 给所有下拉框绑定值变更监听，同时存储每个下拉框的上一次选中值，用于重复时回退
• 每次变更发生后，分别读取两组下拉的三个选中值，拼接为唯一组合字符串（比如用|拼接三个值，形如1|1|1）
• 对比两组的组合字符串，如果完全一致则判定为重复，将当前修改的下拉框回退到上一次的值，并给出提示

完整代码实现 #

你现有HTML结构格式化后如下：

<div class="row div-1">
    <div class="form-group">
        <select class="form-control product-id">
            <option value="" disabled selected>Select Product</option>
            <option value="1">Product One</option>
            <option value="2">Product Two</option>
        </select>
    </div>
    <div class="form-group">
        <select class="form-control product-batch">
            <option value="" disabled selected>Select Batch</option>
            <option value="1">Batch One</option>
            <option value="2">Batch Two</option>
        </select>
    </div>
    <div class="form-group">
        <select class="form-control product-storage">
            <option value="" disabled selected>Select Storage</option>
            <option value="1">Storage One</option>
            <option value="2">Storage Two</option>
        </select>
    </div>
</div>

<div class="row div-2">
    <div class="form-group">
        <select class="form-control product-id">
            <option value="" disabled selected>Select Product</option>
            <option value="1">Product One</option>
            <option value="2">Product Two</option>
        </select>
    </div>
    <div class="form-group">
        <select class="form-control product-batch">
            <option value="" disabled selected>Select Batch</option>
            <option value="1">Batch One</option>
            <option value="2">Batch Two</option>
        </select>
    </div>
    <div class="form-group">
        <select class="form-control product-storage">
            <option value="" disabled selected>Select Storage</option>
            <option value="1">Storage One</option>
            <option value="2">Storage Two</option>
        </select>
    </div>
</div>

以下为jQuery版本的校验逻辑，适配Bootstrap技术栈：

// 初始化存储每个下拉框的上一次选中值
$('select').each(function() {
    $(this).data('lastVal', $(this).val());
});

// 监听所有下拉框的变更事件
$('select').change(function() {
    // 读取第一组的三个选中值
    const group1 = [
        $('.div-1 .product-id').val(),
        $('.div-1 .product-batch').val(),
        $('.div-1 .product-storage').val()
    ];
    // 第一组未选全时不触发校验，直接更新缓存值
    if (group1.some(item => !item)) {
        $(this).data('lastVal', $(this).val());
        return;
    }
    const group1Key = group1.join('|');

    // 读取第二组的三个选中值
    const group2 = [
        $('.div-2 .product-id').val(),
        $('.div-2 .product-batch').val(),
        $('.div-2 .product-storage').val()
    ];
    // 第二组未选全时不触发校验，直接更新缓存值
    if (group2.some(item => !item)) {
        $(this).data('lastVal', $(this).val());
        return;
    }
    const group2Key = group2.join('|');

    // 组合完全重复时回退当前选择
    if (group1Key === group2Key) {
        $(this).val($(this).data('lastVal'));
        alert('该产品+批次+存储的组合已存在，请勿重复选择');
        return;
    }

    // 校验通过，更新缓存的上一次值
    $(this).data('lastVal', $(this).val());
});

如果需要原生JS版本，可参考以下实现：

// 初始化存储每个下拉框的上一次选中值
const allSelects = document.querySelectorAll('select');
allSelects.forEach(select => {
    select.dataset.lastVal = select.value;
});

// 绑定变更事件
allSelects.forEach(select => {
    select.addEventListener('change', function() {
        // 读取第一组值
        const g1Id = document.querySelector('.div-1 .product-id').value;
        const g1Batch = document.querySelector('.div-1 .product-batch').value;
        const g1Storage = document.querySelector('.div-1 .product-storage').value;
        if (!g1Id || !g1Batch || !g1Storage) {
            this.dataset.lastVal = this.value;
            return;
        }
        const g1Key = `${g1Id}|${g1Batch}|${g1Storage}`;

        // 读取第二组值
        const g2Id = document.querySelector('.div-2 .product-id').value;
        const g2Batch = document.querySelector('.div-2 .product-batch').value;
        const g2Storage = document.querySelector('.div-2 .product-storage').value;
        if (!g2Id || !g2Batch || !g2Storage) {
            this.dataset.lastVal = this.value;
            return;
        }
        const g2Key = `${g2Id}|${g2Batch}|${g2Storage}`;

        // 重复则回退
        if (g1Key === g2Key) {
            this.value = this.dataset.lastVal;
            alert('该产品+批次+存储的组合已存在，请勿重复选择');
            return;
        }

        this.dataset.lastVal = this.value;
    });
});

逻辑说明 #

• 仅当两组的三个下拉框都全部选完之后才会触发重复校验，不会在用户中途选择时误拦截
• 出现重复组合时仅回退当前正在修改的下拉框的值，不会清空第二组所有已选内容，操作更友好
• 组合标识用三个值拼接生成，只要任意一个值不同，组合标识就不同，不会出现误判

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