jQuery/Javascript函数可以在Chrome中使用，但不能在IE11中使用

jQuery/Javascript function works in Chrome but not IE11

本文关键字：但不能 IE11 Javascript 函数 jQuery Chrome      更新时间：2023-09-26

我使用的是以下函数，它在chrome中运行良好，如果没有重复，则返回true，如果有重复则返回false，并显示#errordiv。

如果我在IE11中运行它，它会将它们全部标记为重复，并显示#errordiv，即使没有任何重复。。。

// Check for duplicates
function checkSelect() {
    var valid = true;
    var atLeastAValue = false;
    $("select").css("background-color", "white");
    $.each($("select"), function (index, value) {
        var others = $("select");
        if ($(value.selectedOptions).val() !== "") {
            $.each(others, function (otherIndex, otherValue) {
                if ($(otherValue.selectedOptions).val() !== "") {
                    if (index === otherIndex && $(value.selectedOptions).val() === $(otherValue.selectedOptions).val()) {
                        atLeastAValue = true;
                    } else if ($(value.selectedOptions).val() === $(otherValue.selectedOptions).val()) {
                        $(value).css("background-color", "#ff9696");
                        $(otherValue).css("background-color", "#ff9696");
                        valid = false;
                    }
                }
            });
        } else if (!atLeastAValue) {
            $(value).css("background-color", "#ff9696");
            valid = false;
        }
    });
    if (!valid) {
            var $div2 = $("#error");
            if ($div2.is(":visible")) { return; }
            $div2.show("slow");
            setTimeout(function() {
                $div2.hide("slow");
            }, 10000);
    }
    return valid;
};

是什么使它与IE11不兼容，以及我如何使它兼容。。。

selectionOptions尚未在IE中实现。由于您将所选选项传递给jQuery，因此您可以使用：selected选择器。

因此$(value.selectedOptions)变为$(value).find('option:selected')或$(value).val()或仅为value.value（如果选择是单选）

function checkSelect() {
    var valid = true;
    var atLeastAValue = false;
    $("select").css("background-color", "white");
    $.each($("select"), function (index, value) {
        var others = $("select");
        if ($(value).find('option:selected').val() !== "") {
            $.each(others, function (otherIndex, otherValue) {
                if ($(otherValue).find('option:selected').val() !== "") {
                    if (index === otherIndex && $(value).find('option:selected').val() === $(otherValue).find('option:selected').val()) {
                        atLeastAValue = true;
                    } else if ($(value).find('option:selected').val() === $(otherValue).find('option:selected').val()) {
                        $(value).css("background-color", "#ff9696");
                        $(otherValue).css("background-color", "#ff9696");
                        valid = false;
                    }
                }
            });
        } else if (!atLeastAValue) {
            $(value).css("background-color", "#ff9696");
            valid = false;
        }
    });
    if (!valid) {
        var $div2 = $("#error");
        if ($div2.is(":visible")) {
            return;
        }
        $div2.show("slow");
        setTimeout(function () {
            $div2.hide("slow");
        }, 10000);
    }
    return valid;
};

您也可以只使用$(value).val()来获取选择元素的值，如果是单选，它将只返回值，如果选择是多选，则它将返回选定值的数组

是一种更简单的方法

function checkSelect() {
    var $selects = $("select").removeClass('duplicate');
    $selects.each(function(){
        var value = this.value;
        $selects.not(this).has('option[value="'+this.value+'"]:selected').addClass('duplicate');
    })
    var valid = !$selects.hasClass('duplicate');
    if (!valid) {
        var $div2 = $("#error").stop(true, true);
        if ($div2.is(":hidden")) {
            $div2.show("slow");
            setTimeout(function () {
                $div2.hide("slow");
            }, 10000);
        }
    }
    return valid;
};

演示：Fiddle

相关文章：