Question

我的目标是检查所有SELECT元素的重复值（不能在2个SELECT中选择相同的值）
我已经做了很多搜索，但所有这2个选项不能修复更多

我尝试过的逻辑：

检查功能（）{
     声明值数组，错误元素数组
     foreach（选择元素）{      如果所选值存在于值数组中（重复），则将该元素添加到错误元素数组
中      否则将值添加到值数组
     }
     如果没有错误元素（没有重复的值），则从所有选择中删除错误类
     其他foreach（选择elemnt）{
     如果select存在于error元素数组中，则设置错误类
     否则删除错误类
     }
  }

任何选择更改，呼叫检查功能

这里是demo

function checkSelects() 
{ 
    var errorElements = []; var values = [];

    $("select").each(function () {
        if ($.inArray($(this).val(), values) !== -1) {
            errorElements.push($(this).attr('id'));
        } else {
            values.push($(this).val());
        }
    });
    if (errorElements.length === 0) {
        $("select").each(function () {
            $(this).removeClass('error');
        });
    } else {
        $("select").each(function () {
            if ($.inArray($(this).attr('id'), errorElements) !== -1) {
                $(this).addClass('error');
            } else {
                $(this).removeClass('error');
            }
        });
    }
}

$(function () {
     $("select").change(function () {
        checkSelects();
     }); 
});

至于功能是否完美，为重复冲突的一侧设置错误类。但我想让它更清晰，并为双方设定错误等级

是否过度？任何指针如何实现？
这是它的屏幕上限 enter image description here

在2个SELECT中选择text1仅设置后一个元素的错误类我希望两个text1都以红色显示

Answer 1

像这样使用

function checkSelects() {
    var errorElements = [];
    var values = [];

    $("select").each(function () {
        if ($.inArray($(this).val(), values) !== -1) {
            errorElements.push($(this).attr('id'));
        } else {
            values.push($(this).val());
        }
    });
    if (errorElements.length === 0) {
        $("select").each(function () {
            $(this).removeClass('error');
        });
    } else {
        $("select").each(function () {
            if ($.inArray($(this).attr('id'), errorElements) !== -1) {
                $(this).addClass('error');
                $("select[value="+$(this).val()+"]").addClass('error'); <---- here
            } else {
                $(this).removeClass('error');
            }
        });
    }

}

Fiddle

<强> Eidt

我简化了你的代码，你也可以这样使用

function checkSelects() {
    $(".error").removeClass("error");
    $("select").each(function () {
        if ($("select[value=" + $(this).val() + "]").length > 1) {
            $("select[value=" + $(this).val() + "]").addClass('error');
        }
    });
}

$(function () {
    $("select").change(function () {
        checkSelects();
    });
});

<强> Updated Fiddle

Answer 2

只需过滤所有具有相同值的选择框，并立即标记所有选择框。

我还通过在检查开始时清除所有错误来简化代码。

function checkSelects() 
{
    var $elements = $('select');

    $elements
        .removeClass('error')
        .each(function () {
            var selectedValue = this.value;

            $elements
                .not(this)
                .filter(function() {
                    return this.value == selectedValue;
                })
                .addClass('error');
        });
}

Demo

动态检查SELECT重复值

2 个答案: