jQuery / Javascript函數適用於Chrome但不適用於IE11

Question

我正在使用以下函數，它在chrome中完美運行，如果沒有重復項則返回true，如果有重復項則返回false並顯示#error div。

如果我在IE11中運行它將它們全部標記為重復並顯示#error div，即使沒有任何重復...

// 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不兼容，我怎樣才能使它兼容......

Answer 1

在IE中尚未實現selectionOptions 。 由於您將所選選項傳遞給jQuery，因此您可以使用：selected選擇器代替。

所以$(value.selectedOptions)變成$(value).find('option:selected')或$(value).val()或者只是value.value （如果select是單個select）

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()來獲取select元素的值，如果是單選則它將只返回值，select是多選，那么它將返回一個選定值的數組

---

一種更簡化的方法可以

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;
};

演示： 小提琴