当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js下用层来实现select的title提示属性

js下用层来实现select的title提示属性

2019年07月19日  | 移动技术网IT编程  | 我要评论
复制代码 代码如下:

<script>
             function opts(selectobj){
                         var optdivs=document.createelement("div");
                         var objtable=document.createelement("table");
                         var objtbody=document.createelement("tbody");
                         optdivs.style.zindex = "100";
                         objtable.style.zindex = "100";
                         objtable.width=selectobj.style.width;    
                         objtable.border = "0";
                         objtable.cellpadding = "0";
                         objtable.cellspacing = "0";
                         objtable.style.paddingleft = "2";    
                         objtable.style.fontfamily = "verdana, arial, helvetica, sans-serif";

                         var e = selectobj;
                         var abstop = e.offsettop;
                         var absleft = e.offsetleft;
                         var abswidth = e.offsetwidth;
                         var absheight = e.offsetheight;

                         while(e = e.offsetparent){
                         abstop += (e.offsettop+0.3);
                         absleft += e.offsetleft;
                         }

                         with (objtable.style){
                         position = "absolute";
                         top = (abstop + absheight) + "px";
                         left = (absleft+1) + "px";
                         border = "1px solid black";
                         tablelayout="fixed";
                         wordbreak="break-all";
                         }

                         var options = selectobj.options;
                         var val=selectobj.value;

                            if (options.length > 0){
                                 for (var i = 0; i < options.length; i++){
                                     var newoptdiv = document.createelement("td");
                                     var objrow=document.createelement("tr");
                             newoptdiv.name=options[i].value;
                             newoptdiv.innertext=options[i].innertext;
                             newoptdiv.title=options[i].title;
                             newoptdiv.onmouseout = function() {this.classname='smouseout';val=selectobj.value};
                             newoptdiv.onmouseover = function() {this.classname='smouseover';val=this.name;};
                             newoptdiv.classname="smouseout";
                             newoptdiv.style.width=40;
                             newoptdiv.style.cursor="default";
                             newoptdiv.style.fontsize = "11px";
                             newoptdiv.style.fontfamily = "verdana, arial, helvetica, sans-serif";

                             objrow.appendchild(newoptdiv);
                             objtbody.appendchild(objrow);
                             }
                            }

                    
                            objtbody.appendchild(objrow);
                            objtable.appendchild(objtbody);
                            optdivs.appendchild(objtable);
                            document.body.appendchild(optdivs);

                             var ifrref = document.createelement("div");
                            ifrref.style.position="absolute";
                            ifrref.style.width = objtable.offsetwidth;
                            ifrref.style.height = objtable.offsetheight;
                            ifrref.style.top = objtable.style.top;
                            ifrref.style.left = objtable.style.left;
                            ifrref.style.backgroundcolor = document.bgcolor;
                            document.body.appendchild(ifrref);

                            objtable.focus();
                            objtable.onblur=function() {choose(selectobj,val,optdivs,ifrref)};
         }

         function choose(objselect,val,delobj,delobj2){
             objselect.value=val;
             document.body.removechild(delobj);
             document.body.removechild(delobj2);
         }

         </script>

        
         <style>
                    .smouseout {
                            background: document.bgcolor;
                            color: #000000;
                    }
                    .smouseover {
                            background: rgb(0,128,128);
                            color: #ffffff;
                            cursor: pointer;
                    }
            </style>

        
         <select id='selid'    style='width:50px' class='black' onclick="opts(this);">
                <option value='1' title="one....">111</option>
                <option value='2' title="two....">222</option>

            </select>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网