javascript - MultiSelect : Object expected. Jquery 在 IE 中不起作用。在 Firefox 中运行良好

Question

以下 Jquery 代码在 Firefox 中运行良好，但在 IE 中抛出异常。请帮忙。以下代码将呈现一个多选框，您可以将值从一个框拖放到另一个框中。代码在 IE 中运行时会抛出一个对象预期异常。由于它在一个大页面内，无法识别错误的实际位置。

$(document).ready(function() {

    //adding combo box
    $(".combo").each(function() {

        var name = "to" + $(this).attr('name');
        var $sel = $("<select>").addClass("multi_select");
        $sel.addClass("combo2");
        $sel.attr('id', $(this).attr('id') + "_rec");
        $(this).after($sel);
    });

    $(".multi_select").hide();

    var $tab;
    var i = 0;
    var temp = 0;
    //creating different div's to accomodate different elements
    $(".multi_select").each(function() {
        var $cont = $("#container");
        var $input;
        if ($(this).hasClass("combo") || $(this).hasClass("combo2")) {

            var $col = null;
            if ($(this).hasClass("combo")) {
                $tab = $("<table>");
                $cont = ($tab).appendTo($cont);
                var idT = $(this).attr('id');
                var $row = $("<tr id='" + idT + "_row1'>").appendTo($tab);
                $col = $("<td id='" + idT + "_col1'>").appendTo($row);
                $input = $("<input class='searchOpt'></input><img src='images/add.png' class='arrow1'/> ");
                $("<div>").addClass('ip_outer_container combo').attr('id', $(this).attr('id') + "out_div").append("<h3 class='header_select'>Tasks</h3>").appendTo($col);
                ($row).after("<tr><td></td><td><textarea name='" + $(this).attr("name") + "Text' id='" + $(this).attr("id") + "Text'></textarea> </td></tr>");

                $cont = $tab;
            } else {
                var idTm = $(this).attr('id');
                var $row2 = $("<tr id='" + idTm + "_row2'>").appendTo($tab);
                var $col2 = $("<td id='" + idTm + "_col2'>").appendTo($row2);
                $input = $("<input class='searchOpt'></input>");

                $("<div>").addClass('ip_outer_container combo2').attr('id', $(this).attr('id') + "out_div").append("<h3 class='header_select'>Tasks</h3>").appendTo($col2);

            }


        } else {
            $("<div>").addClass('ip_outer_container' + classSelect).attr('id', $(this).attr('id') + "out_div").append("<h3 class='header_select'>Tasks</h3>").appendTo($cont);
        }

        $("<div>").addClass('outer_container').attr('id', $(this).attr('id') + "_div").appendTo('#' + $(this).attr('id') + "out_div");
        $($input).appendTo("#" + $(this).attr('id') + "out_div");

    });

    //adding options from select box to accomodate different //elements
    $(".multi_select option").each(function() {
        $(this).attr('id', $(this).parent().attr('id') + "option_" + i);

        var val = $(this).val().replace("#comment#", "");
        var $d = $("<div class='multi_select_div'>" + val + "</div>").attr('id', $(this).parent().attr('id') + 'option_div_' + i);
        $d.appendTo("#" + $(this).parent().attr('id') + "_div");
        i++;
    });

    //delete function
    $(".delete").click(function() {
        $(this).parent().remove();
    });
    //input
    $(".searchOpt").keyup(function() {
        $(this).prev().children().show();
        var val = $(this).val();
        if (val != "") {
            var selId = $(this).prev().attr('id');
            selId = selId.replace("_div", "option_div");
            $(this).prev().children().not("div[id^=" + selId + "]:contains(" + val + ")").hide();
            //var $d=$('div[id^="multi_select_senoption_div"]');
            //$('div[id^="multi_select_senoption_div"]').not('div[id^="multi_select_senoption_div"]:contains("xls")').hide();
        }
    });
    var optionId = 0;
    $(".arrow1").click(function() {
        var divId = $(this).parent().attr("id");
        divId = divId.replace("out_div", "");
        var textValue = "#comment#" + $("#" + divId + "Text").val();

        var selToId = divId + "_rec";
        $("#" + divId + " option[selected='selected']").each(function() {
            var idOpt = $("#" + selToId).attr("id") + "option_" + optionId;

            $opt = $("<option>");
            $opt.attr("id", idOpt).attr("value", $(this).val() + textValue);
            $("#" + selToId).append($opt);
            var value = $(this).val().replace("#comment#", "");
            var divId = $("#" + selToId).attr('id') + 'option_div_' + optionId;
            var $de = $("<div class='multi_select_div'><img class='delete' src='images/delete.png'></img>" + value + "</div>").attr('id', divId);
            $de.appendTo("#" + $("#" + selToId).attr('id') + "_div");
            $("#" + divId).bind("click", handler);
            var optId = divToOption($(this).attr("id"));
            var optValue = $(optId).val();
            var comment = optValue.substring(optValue.indexOf("#comment#") + 9);
            $("#" + divId).attr("title", textValue.replace("#comment#", ""));
            //$("#"+divId).bind("mouseenter",handler2);
            //$("#"+divId).bind("mouseleave",handler3);
            $(".delete").bind("click", handler1);

            optionId++;
        });
        // function code
        //
    });

    $(".multi_select_div").click(function() {
        var id = divToOption($(this).attr('id'));
        var selected = $(id + "[selected]");

        if (selected.length > 0) {
            $(id).attr('selected', false);
            var cssObj = {
                'background-color': 'black'
            };
            $(this).css(cssObj);

        }
        else {
            $(id).attr('selected', 'selected');
            var cssObj = {
                'background-color': 'orange'
            };
            $(this).css(cssObj);

        }
    });

    function handler(event) {
        var id = divToOption($(this).attr('id'));
        var selected = $(id + "[selected]");

        if (selected.length > 0) {
            $(id).attr('selected', false);
            var cssObj = {
                'background-color': 'black'
            };
            $(this).css(cssObj);

        }
        else {
            $(id).attr('selected', 'selected');
            var cssObj = {
                'background-color': 'orange'
            };
            $(this).css(cssObj);

        }
    }

    function handler1(event) {
        $(this).parent().remove();

    }

    function handler2(event) {

        var optId = divToOption($(this).attr("id"));
        var optValue = $(optId).val();
        var comment = optValue.substring(optValue.indexOf("#comment#") + 9);
        var pos = $(this).position();
        var cssObj = {
            top: pos.top - 100,
            left: pos.left + 200
        };

        var $divImg = $("<td>");
        var $divCl = $("<div class='comment'>" + comment + "</div>").css(cssObj);
        $divImg.append($divCl);
        $(this).parent().parent().parent().parent().append($divImg);

    }

    function handler3(event) {
        $(".comment").remove();
    }


});

function optionToDiv(option) {
    var id_div = option.replace('option_', 'option_div_');
    id_div = "#" + id_div;
    return id_div;

}

function divToOption(div) {
    var id_opt = div.replace('div_', '');
    id_opt = "#" + id_opt;
    return id_opt;

}​

Answer 1

IE 浏览器不支持数组的 indexOf，这会导致 javascript 出现问题。

在页面头部添加以下 JavaScript，它可能会解决您的问题:

    //
    // IE browsers do not support indexOf method for an Array. Hence 
    // we add it below after performing the check on the existence of
    // the same.
    //
    if (!Array.prototype.indexOf)
    {
        Array.prototype.indexOf = function (obj, start)
        {
            for (var i = (start || 0), j = this.length; i < j; i++)
            {
                if (this[i] === obj)
                {
                    return i;
                }
            }
            return -1;
        };
    }