CODEWITHSUNDEEP
jquery
user441365
user441365

Reputation: 4032

jquery indexOf problem with IE

I have a multiple select field and a jquery function that checks for a change in the select. the function looks for the value "Other", and if it's selected then displays an extra text field.

This is all working fine in chrome and FF, but for some reason IE throws an error on the indexOf function "Object doesn't support this property or method".

Any help would be much appreciated.

Here's the code:

EDIT: Remember that this code actually works in chrome and FF. Is only IE that is throwing the error...

<select name="test" multiple="multiple" id="test">
 <option value="one">one</option>
 <option value="two">two</option>
 <option selected="selected" value="Other">Other</option>
</select>
<input name="Name_Other" type="text" id="Name_Other" class="OtherDisplay" />


$.toggleOther = function (dd, txtOther) {
        if ($(dd).val() == null || $(dd).val().indexOf("Other") != 1) 
            $(txtOther).hide();

        $(dd).change(function () {
            var sel = $(this).val();
            if (sel != null && sel.indexOf("Other") != -1) { 
                $(txtOther).show();
            }
            else {
                $(txtOther).hide();
            }
        });
    }

$.toggleOther("#test", ".OtherDisplay");

Upvotes: 1

Views: 5956

Answers (5)

arthurfonseca
arthurfonseca

Reputation: 171

The truth is that IE dosen't handle Array.indexOf. That is the problem source.

You can create the handler:

if(!Array.indexOf){
    Array.prototype.indexOf = function(obj){
        for(var i=0; i<this.length; i++){
            if(this[i]==obj){
                return i;
            }
        }
        return -1;
    }
}

It should solve your problem.

Upvotes: 3

Amol
Amol

Reputation: 11

try using IndexOf, i had similar problem where indexOf was not working in few versions of IE. IndexOf works well in all of the popular browsers and also in IE

Upvotes: 1

psx
psx

Reputation: 4048

Instead of $(this).val(), try using:

var sel = $(this).text();

Upvotes: -1

davin
davin

Reputation: 45565

$.toggleOther = function (dd, txtOther) {
        dd  =  $(dd);
        txtOther = $(txtOther);

        dd.change(function  () {
            var toggleBool = false;
            var sel  =  $.each($(this).val(), function(i,e){
                if (e.indexOf("Other")!=-1) toggleBool=true;
            });
            txtOther.toggle(toggleBool);
        }).change();
    };

$.toggleOther("#test", ".OtherDisplay");

the code is a little shorter than the original, and a little more powerful

this checks if any of the selected items are "Other" and if so, shows the Other text box. You see, your select box is a multiselect, so .val() returns an array (even if only one item is selected, see the docs), so we simply iterate through the array and check if any of them are the "Other" field.

alternatively, if you wanted to check if only the Other field was selected, you could replace the $.each with a simple array length check and then put the same conditional in.

lastly, if you wanted to make the code really flexible, and work for multiselects and not multiselects, just check what type of object .val() returns, so your code handles both stings and arrays appropriately (see the .val() docs).

Upvotes: 0

MightyE
MightyE

Reputation: 2679

$(this).val() returns a native value (such as a String), not a jQuery object. indexOf which you're executing against that apparently doesn't existi in IE. Since this is almost certainly a string for you, try using .match() instead:

if (sel != null && sel.match(/Other/)) {
    ...
}

Upvotes: 0

Related Questions