jQuery/Javascript function works in Chrome but not IE11

Question

I am using the following function and it works perfectly in chrome, returns true if there are no duplicates, returns false if there are duplicates and shows the #error div.

If I run it in IE11 it flags them all as duplicates and shows the #error div even though there aren't any duplicates...

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

What is making this incompatible with IE11 and how can I make it compatible...

Answer 1

The selectionOptions is not yet implemented in IE. Since you are passing the selected options to jQuery always you can use the :selected selector instead.

So $(value.selectedOptions) becomes $(value).find('option:selected') or $(value).val() or just value.value (if the select is a single 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;
};

You can also use just $(value).val() to get the value of a select element, if it is single select it will return just the value, it the select is a multi select then it will return an array of selected values

---

A more simplified way can be

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

Demo: Fiddle