Question

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");

Answer 1

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