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...

your duplicate logic seems to be way more complicated than it is required... can you share the html also — Arun P Johny
– Arun P Johny, Commented Mar 18, 2015 at 3:46
@ArunPJohny Here we go jsfiddle.net/ckqp76kv note this is WITHOUT your fix. (I've pre-populated the options & input field, usually there wouldn't be any selected="selected" — Ryflex
– Ryflex, Commented Mar 18, 2015 at 5:17
@ArunPJohny I can't see/find a faster/better way to do what that task does, maybe I'm missing something? — Ryflex
– Ryflex, Commented Mar 18, 2015 at 7:58
Oh wow, yeah yours is far better. Didn't realise you could capture all the selects as one variable. — Ryflex
– Ryflex, Commented Mar 18, 2015 at 19:46

Arun P Johny · Accepted Answer · 2015-03-18 08:10:56Z

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

Collectives™ on Stack Overflow

jQuery/Javascript function works in Chrome but not IE11

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related