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


Posted in Javascript onFebruary 23, 2010
<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>
Javascript 相关文章推荐
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
jquery 锁定弹出层实现代码
Feb 23 #Javascript
javascript document.compatMode兼容性
Feb 23 #Javascript
js操作ajax返回的json的注意问题!
Feb 23 #Javascript
javascript入门基础之私有变量
Feb 23 #Javascript
第一个JavaScript入门基础 document.write输出
Feb 22 #Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 #Javascript
jQuery 操作下拉列表框实现代码
Feb 22 #Javascript
You might like
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
django解决跨域请求的问题
2018/11/11 Python
Python字典的核心底层原理讲解
2019/01/24 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
医学专业职业生涯规划范文
2014/02/05 职场文书
合伙协议书
2014/04/23 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
一体化教学实施方案
2014/05/10 职场文书
上海世博会口号
2014/06/19 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python