Icon images in dropdown list

Icon images in dropdown list

Hi All,

I am using JQuery which converts an html select box on my page to a dropdown containing icon images at the left of each option.

All is working good except, when my select box contains the options more than or equal to 700 it gives me following error message in Internet Explorer



following function in my icons_dd.js file is generating this error:

    makeAdropDown:function()
    {
        var alldps=this.getdps();
        var idMain=this.settings.idpostfixmain;
        var idChild=this.settings.idpostfixchild;
        var idhidden=this.settings.idhidden;
        var idA=this.settings.idpostfixa;
        var idtitlediv=this.settings.idposttitlediv;
        var idtitle=this.settings.idposttitle;
        var ddclass=this.styles.ddclass;
        var childclass=this.styles.childclass;
        var arrowclass=this.styles.arrowclass;
        var arrow=this.styles.arrow;
        var titleclass=this.styles.titleclass;
        var counter=0;
        for(i in alldps)
        {
            var id=i;
            this.setOutOfVision(id);
            var values=alldps[i];
            var selectProp=values["selectAttributes"];
            var selectAction=values["selectAction"];
            var position=values.position;
            var width=(values.width)+'px';
            var titlewidth=values.width-18+'px';
            var top=position.top+'px';
            var left=position.left+'px';
            var dd_id=id+idMain;
            if($("#"+dd_id).length>0)
            {
                $("#"+dd_id).remove();
            }
            var childid=dd_id+idChild;
            var childtitledivid=dd_id+idtitlediv;
            var titleid=dd_id+idtitle;
            var hiddeninput=dd_id+idhidden;
            var onchange=values.onchange;
            var childheight='';
            if(values.length>this.getVisibleRows())childheight='200';
            var ddhtml="";
            var zIndex=this.zIndex--;
            var css=(selectProp["disabled"]==true)?" "+this.styles.disabled:this.styles.enabled;
            ddhtml+="<div  id='"+dd_id+"' class='"+ddclass+"' style='position:relative;width:"+width+";z-Index:"+zIndex+"'>";
            if(selectProp["disabled"]==true)
            {
                ddhtml+="<div id='"+childtitledivid+"' class='"+css+"'><div class='"+arrowclass+"'><img src='"+arrow+"' border='0' align='right' /></div><div style='white-space:nowrap;width:"+titlewidth+"' class='"+titleclass+"' id='"+titleid+"'>Loading...</div><input style='text-indent:-400px;position:absolute; top:0; left:0; border:none; background:transparent;cursor:pointer;width:0px;heigh:0px;' type='text' value='' id='"+hiddeninput+"' name='"+hiddeninput+"' /></div>";
            }
            else
            {
                ddhtml+="<div id='"+childtitledivid+"' class='"+css+"' onclick=\"MSDropDown.openDropDown('"+dd_id+"')\"><div class='"+arrowclass+"'><img src='"+arrow+"' border='0' align='right' /></div><div style='white-space:nowrap;width:"+titlewidth+"' class='"+titleclass+"' id='"+titleid+"'>Loading...</div><input style='position:absolute; top:0; left:0; border:none; background:transparent;cursor:pointer;width:0px;heigh:0px;' type='text' value='' id='"+hiddeninput+"' name='"+hiddeninput+"' /></div>";
            };
            ddhtml+="<div id='"+childid+"' class='coloredScroll "+childclass+"' style='width:"+(values.width+2)+"px'>";
            var ahtml="";var sValue="";var sImg="";
            var selID;
            var aCount=0
            //for(var aCount=0;aCount<values.length;aCount++)
            var ro = new RepeatingOperation(function()
            {
                var curretna=values[aCount];
                var aID=dd_id+"_a_"+aCount;
                var value=curretna.value;
                if(aCount==0)
                {
                    var selectedID=aID;
                };
                var text=curretna.text;
                var selected=curretna.selected;
                var icon=curretna.icon;
                if($("#"+id+" option:selected").text()==text)
                {
                    sValue=text;
                    selectedID=aID;
                    var showIcon= MSDropDown.getSetting("iconWithTitle");
                    if(icon!=undefined&&showIcon==true)
                    {
                        sImg="<img hspace='2' align='absMiddle' src='"+icon+"' />";
                    };
                }
                var isDisabled=curretna.disabled;
                var img="";
                var sTitle=(MSDropDown.getShowTitle()==true)?text:'';
                var innerStyle=(curretna.style!=undefined)?curretna.style:'';
                if(curretna.optstart!=undefined)
                {
                    var optLabel=(curretna.optstart.label==undefined)?'':curretna.optstart.label;
                    ahtml+="<div style='display:block;clear:both;'><span style='font-weight:bold;font-style:italic'>"+optLabel+"</span><div style='display:block;text-indent:10px;clear:both:'>";
                };
                if(icon!=undefined)
                {
                    img="<img id='"+aID+"_icon' class='icon' align='left' src='"+icon+"' />";
                };
                if(isDisabled==undefined||isDisabled==false)
                {
                    ahtml+="<a id='"+aID+"'  style='display:block;"+innerStyle+"'+ href='javascript:void(0);' value='"+(value)+"' onclick=\"MSDropDown.setSelected('"+dd_id+"', '"+replaceChars(text,"'","|")+"', '"+aID+"', '"+replaceChars(value,"'","|")+"', '"+icon+"')\">";
                }
                else
                {
                    ahtml+="<a id='"+aID+"'  style='cursor:pointer;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;display:block;"+innerStyle+"' href='javascript:void(0);' value='"+(value)+"'>";
                };
                ahtml+=img+'<span>'+text+"</span></a>";
                if(curretna.optend=="end")
                {
                    ahtml+="</div></div>";
                };
                if (++aCount < values.length) { ro.step(); }
                else
                {
                    sValue=(sValue=='')?values[0].text:sValue;
                    ddhtml+=ahtml;
                    ddhtml+="</div>";
                    ddhtml+="</div>";
                    counter++;
                    $("#"+id).after(ddhtml);
                    if(selectProp["disabled"]==false){}
                    else{$("#"+dd_id).css({opacity:0.4});};
                    MSDropDown.applyEvents(dd_id,values,id);
                    if(childheight!='')$("#"+childid).css({overflowY:'scroll',overflowX:'hidden',height:childheight+'px'});
                    $("#"+titleid).html(sImg+sValue);
                    MSDropDown.manageSelection(id,selectedID);
                };
            }, values.length + 1);
            ro.step();

        }
    }

I don't need any suggestions of changing registry values, any one please tell me how to optimize this code to avoid above error.

Thanks & Regards
Adnan Kotawala
Kotawala_Adnan@yahoo.co.in