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 "Oth开发者_C百科er", 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");

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.

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

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

$(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/)) {
    ...
}

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

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