关于下拉框内容过多如何解决

关于下拉框内容过多如何解决

做项目的时候经常遇到下拉框中需要选择的内容过多的情况，有时候多到上千项内容，
选择起来非常不方便
找个好的方法是将下拉框中的内容放到一个iframe中，利用弹出方式来获得选择内容
代码非常简单，但是显示的效果确很明显
index.htm代码如下：

 

< html >
     < head >
         < title > title >
         < style > ...
            body{...}{font-size:9pt}
         style >
         < script   language ="javascript" > ...
            function ShowOpenWin(objTag)
            ...{
                document.getElementById("frmOpenWin").style.display = "block";
                
                var position = getPos(objTag);                    

                document.getElementById("frmOpenWin").style.top =  (position.y+22) + "px";
                document.getElementById("frmOpenWin").style.left = position.x+"px";
            }

            function HiddenAllFlag()
            ...{
                if(event.srcElement.id != "tbxCategory")
                ...{
                    document.getElementById("frmOpenWin").style.display = "none";
                }
            }
            
            function getPos(elm)
            ...{
                for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent); 
                return ...{x:zx,y:zy}                
            }
         script >
     head >
     < body  onclick ="HiddenAllFlag()" >
        旧的行业选择： < select  ID ="Select1"  NAME ="Select1"   style ="width:250" >
             < option > 农业 option >
             < option > 谷物及其他作物的种植 option >
             < option > 谷物的种植 option >
             < option > 薯类的种植 option >
             < option > 油料的种植 option >
             < option > 豆类的种植 option >
             < option > 棉花的种植 option >
             < option > 麻类的种植 option >
             < option > 糖料的种植 option >
             < option > 烟草的种植 option >
             < option > 其他作物的种植 option >
             < option > 蔬菜、园艺作物的种植 option >
             < option > 蔬菜的种植 option >
             < option > 花卉的种植 option >
             < option > 其他园艺作物的种植 option >
             < option > 水果、坚果、饮料和香料作物的种植 option >
             < option > 水果、坚果的种植 option >
             < option > 茶及其他饮料作物的种植 option >
             < option > 香料作物的种植 option >
             < option > 中药材的种植 option >
             < option > 林业 option >
             < option > 林木的培育和种植 option >
             < option > 育种和育苗 option >
             < option > 造林 option >
             < option > 林木的抚育和管理 option >
             < option > 木材和竹材的采运 option >
             < option > 木材的采运 option >
             < option > 竹材的采运 option >
             < option > 林产品的采集 option >
             < option > 畜牧业 option >
             < option > 牲畜的饲养 option >
             < option > 猪的饲养 option >
             < option > 家禽的饲养 option >
             < option > 狩猎和捕捉动物 option >
             < option > 其他畜牧业 option >
             < option > 渔业 option >
             < option > 海洋渔业 option >
             < option > 海水养殖 option >
             < option > 海洋捕捞 option >
             < option > 内陆渔业 option >
             < option > 内陆养殖 option >
             < option > 内陆捕捞 option >
             < option > 农、林、牧、渔服务业 option >
             < option > 农业服务业 option >
             < option > 灌溉服务 option >
             < option > 农产品初加工服务 option >
             < option > 其他农业服务 option >
             < option > 林业服务业 option >
             < option > 畜牧服务业 option >
             < option > 兽医服务 option >
             < option > 其他畜牧服务 option >
             < option >
                国际组织 option >
             < option >
                村民自治组织 option >
             < option >
                社区自治组织 option >
             < option >
                基层群众自治组织 option >
             < option >
                宗教组织 option >
             < option >
                其他社会团体 option >
             < option >
                行业性团体
             option >
             < option >
                专业性团体 option >
             < option > 农、林、牧、渔业 option >
         select >
         < br >
        新的行业选择： < input  type ="text"  id ="tbxCategory"  onclick ="ShowOpenWin(this);"  style ="width:250" />
         < iframe  onlosecapture ="HiddenAllFlag()"  onblur ="HiddenAllFlag()"  src ="sel.htm"  id ="frmOpenWin"
            frameborder ="0"  style ="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; DISPLAY: none; BORDER-LEFT: 1px solid; WIDTH: 400px; BORDER-BOTTOM: 1px solid; POSITION: absolute; HEIGHT: 350px" > iframe >
     body >
html >

 

sel.htm代码如下： 

 

< html >
     < head >
         < style > ...
            body{...}{font-size:9pt}
            td{...}{font-size:9pt}
         style >
         < script  language ="javascript" > ...
            var oldBackGroundColor = "";
            var bClick = false;
            
            function onclickRow(objid,objName)
            ...{
                window.parent.document.getElementById("tbxCategory").value = objName+"["+objid+"]";
                window.parent.window.document.getElementById("frmOpenWin").style.display = "none";
            }
            
            function tr_onmouseover(event)
            ...{
                bClick = true;
                var objTR = null;
                
                if(event == null)
                ...{
                    event = window.event; // For IE
                }
                var objTag = event.srcElement? event.srcElement : event.target;//For FierFox
                
                if(objTag.tagName == "TD")
                ...{
                    if(document.all)
                    ...{
                        if(objTag.parentNode.tagName == "TR")
                        ...{
                            oldBackGroundColor = objTag.parentNode.style.backgroundColor;
                            objTag.parentNode.style.backgroundColor = "#99ff00";
                        }
                        else if(objTag.parentNode.parentNode.tagName == "TR")
                        ...{
                            oldBackGroundColor = objTag.parentNode.style.backgroundColor;
                            objTag.parentNode.parentNode.style.backgroundColor = "#99ff00";
                        }
                    }
                    else
                    ...{
                        if(objTag.parentNode.tagName == "TR")
                        ...{
                            oldBackGroundColor = objTag.parentNode.style.backgroundColor;
                            objTag.parentNode.style.backgroundColor = "#99ff00";
                        }
                        else if(objTag.parentNode.parentNode.tagName == "TR")
                        ...{
                            oldBackGroundColor = objTag.parentNode.style.backgroundColor;
                            objTag.parentNode.parentNode.style.backgroundColor = "#99ff00";
                        }
                    }    
                }
                else
                ...{
                    if(objTag.tagName == "TR")
                    ...{
                        oldBackGroundColor = objTag.parentNode.style.backgroundColor;
                        objTag.style.backgroundColor="#99ff00";
                    }
                    else if(objTag.parentNode.tagName == "TR")
                    ...{
                        oldBackGroundColor = objTag.parentNode.style.backgroundColor;
                        objTag.parentNode.style.backgroundColor="#99ff00";
                    }
                    else if(objTag.parentNode.parentNode.tagName == "TR")
                    ...{
                        oldBackGroundColor = objTag.parentNode.style.backgroundColor;
                        objTag.parentNode.parentNode.style.backgroundColor="#99ff00";
                    }
                }
            }
            function tr_onmouseout(event)
            ...{
                var objTR = null;
                if(event == null)
                ...{
                    event = window.event; // For IE
                }
                var objTag = event.srcElement? event.srcElement : event.target;//For FierFox
                
                if(objTag.tagName == "TD")
                ...{
                    if(objTag.parentNode.tagName == "TR" && bClick)
                    ...{
                        objTag.parentNode.style.backgroundColor = oldBackGroundColor;
                        oldBackGroundColor = "";
                    }
                    else if(objTag.parentNode.parentNode.tagName == "TR" && bClick)
                    ...{
                        objTag.parentNode.parentNode.style.backgroundColor = oldBackGroundColor;
                        oldBackGroundColor = "";
                    }
                }
                else
                ...{
                    if(objTag.tagName == "TR" && bClick)
                    ...{
                        objTag.style.backgroundColor = oldBackGroundColor;
                        oldBackGroundColor = "";
                    }
                    else if(objTag.parentNode.tagName == "TR" && bClick)
                    ...{
                        objTag.parentNode.style.backgroundColor=oldBackGroundColor;
                        oldBackGroundColor = "";
                    }
                    else if(objTag.parentNode.parentNode.tagName == "TR" && bClick)
                    ...{
                        objTag.parentNode.parentNode.style.backgroundColor=oldBackGroundColor;
                        oldBackGroundColor = "";
                    }
                }
                bClick = false;
            }
            
            function InitRowBackColor(objTable)
            ...{
                for(var i = 0; i < objTable.rows.length; i ++)
                ...{
                    if(document.all)
                    ...{
                        objTable.rows[i].style.backgroundColor = "";
                    }
                    else
                    ...{
                        objTable.rows[i].style.backgroundColor = "";
                    }
                }
            }
         script >
     head >
     < body  MS_POSITIONING ="GridLayout"  leftmargin ="0"  topmargin ="0" >
         < table  width ="100%"  border ="0"  align ="center"  cellpadding ="0"  cellspacing ="1"  bordercolor ="#CCCCCC"
            bgcolor ="#999999"  ID ="Table4" >
             < tr >
                 < td  bgcolor ="#FFFFFF" > 行业名称： < input  type ="text"  id ="tbxname" >< input  type ="button"  id ="btnOk"  value ="查询" > td >
             tr >
             < tr >
                 < td  height ="58"  bgcolor ="#FFFFFF" >
                     < table  width ="99%"  border ="0"  align ="center"  cellpadding ="0"  cellspacing ="1"  bordercolor ="#006699"
                        name ="tbData"  id ="tbData" >
                         < tr  bgcolor ="#A9D0FC" >
                             < td  align ="center"  height ="25px" >< b > 行业ID b > td >
                             < td  align ="center" >< B > 行业名称 B > td >
                             < td  align ="center" >< b > 行业说明 b > td >
                         tr >
                         < tr  style ="cursor:hand"  bgcolor ="#E9F3FE"  onclick ="onclickRow('001','农业');"  onmouseover ="tr_onmouseover()"
                            onmouseout ="tr_onmouseout()" >
                             < TD  align ="center"  height ="25" > 001 TD >
                             < TD  align ="center" > 农业 TD >
                             < TD > 农业说明 TD >
                         tr >
                         < tr  style ="cursor:hand"  bgcolor ="#E9F3FE"  onclick ="onclickRow('002','谷物及其他作物的种植');"
                            onmouseover ="tr_onmouseover()"  onmouseout ="tr_onmouseout()" >
                             < TD  align ="center"  height ="25px" > 002 TD >
                             < TD  align ="center" > 谷物及其他作物的种植 TD >
                             < TD > 谷物及其他作物的种植说明 TD >
                         tr >
                         < tr  style ="cursor:hand"  bgcolor ="#E9F3FE"  onclick ="onclickRow('003','谷物的种植');"  onmouseover ="tr_onmouseover()"
                            onmouseout ="tr_onmouseout()" >
                             < TD  align ="center"  height ="25px" > 003 TD >
                             < TD  align ="center" > 谷物的种植 TD >
                             < TD > 谷物的种植说明 TD >
                         tr >
                         < tr  style ="cursor:hand"  bgcolor ="#E9F3FE"  onclick ="onclickRow('004','薯类的种植');"  onmouseover ="tr_onmouseover()"
                            onmouseout ="tr_onmouseout()" >
                             < TD  align ="center"  height ="25px" > 004 TD >
                             < TD  align ="center" > 薯类的种植 TD >
                             < TD > 薯类的种植说明 TD >
                         tr >
                         < tr  style ="cursor:hand"  bgcolor ="#E9F3FE"  onclick ="onclickRow('005','油料的种植');"  onmouseover ="tr_onmouseover()"
                            onmouseout ="tr_onmouseout()" >
                             < TD  align ="center"  height ="25px" > 005 TD >
                             < TD  align ="center" > 油料的种植 TD >
                             < TD > 油料的种植说明 TD >
                         tr >
                         < tr  style ="cursor:hand"  bgcolor ="#E9F3FE"  onclick ="onclickRow('006','豆类的种植');"  onmouseover ="tr_onmouseover()"
                            onmouseout ="tr_onmouseout()" >
                             < TD  align ="center"  height ="25px" > 006 TD >
                             < TD  align ="center" > 豆类的种植 TD >
                             < TD > TD >
                         tr >
                         < tr  style ="cursor:hand"  bgcolor ="#E9F3FE"  onclick ="onclickRow('007','棉花的种植');"  onmouseover ="tr_onmouseover()"
                            onmouseout ="tr_onmouseout()" >
                             < TD  align ="center"  height ="25px" > 007 TD >
                             < TD  align ="center" > 棉花的种植 TD >
                             < TD > TD >
                         tr >
                         < tr  style ="cursor:hand"  bgcolor ="#E9F3FE"  onclick ="onclickRow('008','麻类的种植');"  onmouseover ="tr_onmouseover()"
                            onmouseout ="tr_onmouseout()" >
                             < TD  align ="center"  height ="25px" > 008 TD >
                             < TD  align ="center" > 麻类的种植 TD >
                             < TD > TD >
                         tr >
                         < tr  style ="cursor:hand"  bgcolor ="#E9F3FE"  onclick ="onclickRow('009','糖料的种植');"  onmouseover ="tr_onmouseover()"
                            onmouseout ="tr_onmouseout()" >
                             < TD  align ="center"  height ="25px" > 009 TD >
                             < TD  align ="center" > 糖料的种植 TD >
                             < TD > TD >
                         tr >
                         < tr  style ="cursor:hand"  bgcolor ="#E9F3FE"  onclick ="onclickRow('010','烟草的种植');"  onmouseover ="tr_onmouseover()"
                            onmouseout ="tr_onmouseout()" >
                             < TD  align ="center"  height ="25px" > 010 TD >
                             < TD  align ="center" > 烟草的种植 TD >
                             < TD > TD >
                         tr >
                     table >
                     < div  style ="text-align:right" >
                        共500行,50页
                         < SELECT  name ="page_size"  ID ="Select2" >
                             < OPTION  value ="10"  selected > 10 OPTION >
                             < OPTION  value ="20" > 20 OPTION >
                             < OPTION  value ="30" > 30 OPTION >
                             < OPTION  value ="50" > 50 OPTION >
                             < OPTION  value ="100" > 100 OPTION >
                         SELECT > 条记录  < A  style ="color:blue" > 下一页 A >   < A  style ="color:blue" > 最后页 A >  转到 < INPUT  style ="width:36px"  value ="1"  name ="page"  ID ="Text1" > 页
                         < INPUT  class ="btn"  type ="button"  value ="go"  ID ="Button1"  NAME ="Button1" >
                     div >
                 td >
             tr >
         table >
     body >
html >

 

预览效果如下：

 另：从树中选择数据或其他大量数据中选择数据也可适用该方法