<!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <style type="text/css">

      #gridComboBox {

         background: #fff;

         border: 1px solid #2d78f4;

         border-radius: 2px;

         -moz-box-shadow: inset 0 0 4px #06c;

         -webkit-box-shadow: inset 0 0 4px #06c;

         box-shadow: inset 0 0 4px #06c;

     }

     </style>

 </head>

 <body>

     <input  onclick="doClick(this,'ddd(aa/bb/cc/erererer/dfdfdfdfdfdfdfdfdfdfdfdfdf/ejjejrjerjer//erererer ////////)eee')" />

     <input  onclick="doClick(this,'ddd(aa/bb/cc/erererer/dfdfdfdfdfdfdfdfdfdfdfdfdf/ejjejrjerjer//erererer ////////)eee')" style='width: 300px;' />

     <p><b>Needed Properties:</b> sender.offsetTop & sender.offsetLeft & sender.offsetHeight</p>

 </body>

 </html>

 <script type="text/javascript">

 function delGridComboBox() { // 删除弹出框

     var divContainer = document.getElementById('gridComboBox');

     if (divContainer) {

         divContainer.parentNode.removeChild(divContainer);

     }

 }

 function doClick(sender, str) {//str='ddd(aa/bb/cc/erererer/dfdfdfdfdfdfdfdfdfdfdfdfdf/ejjejrjerjer//erererer ////////)eee' 只取()得内容/分割做为数据源

     delGridComboBox();

     // console.log(sender);

     // for(var i in sender)

     // {

     //     console.log(i+"|"+sender[i]);

     // }

     var re = /[^\)\(]*/g //取出()中的内容作为下拉数据源

     var fit = str.match(re);

     var fmt = fit[2].split('/');

     var divContainer = document.createElement('div');

     divContainer.style.width = sender.clientWidth + 2 + "px";

     divContainer.style.overflow = "hidden";

     divContainer.style.position = 'absolute';

     divContainer.style.top = sender.offsetTop + sender.offsetHeight + 'px';

     divContainer.style.left = sender.offsetLeft + 'px';

     divContainer.style.zIndex = 999;

     divContainer.id = "gridComboBox";

     for (var i = 0; i < fmt.length; i++) {     

         console.log('fmt[i]>>', fmt[i]);

         var txt = document.createElement('div');

         txt.innerHTML = fmt[i];

         txt.title = txt.innerHTML;

         txt.style.margin = 3+'px';

         txt.addEventListener('mouseover', function changeBg(event) {

             event.target.style.fontWeight = 'bold';

             event.target.style.color = 'white';

             event.target.style.backgroundColor = '#2d78f4';

         }, false);

         txt.addEventListener('mouseout', function unChangeBg(event) {

             event.target.style.fontWeight = 'normal';

             event.target.style.color = 'black';

             event.target.style.backgroundColor = 'white';

         }, false);

         txt.onclick = function(subSender) {

             sender.value = subSender.target.innerText;

             delGridComboBox();

         };

         divContainer.appendChild(txt);

     };

     document.body.appendChild(divContainer);

 };

 </script>

原文地址:  http://www.cnblogs.com/xuejianxiyang/p/4959912.html

div模拟实现select下拉框的更多相关文章

  1. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  2. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  3. 好看的Select下拉框是如何制造的

    现在在大多数网站中都能看到很华丽的Select下拉框,他们是如何实现的呢?使用默认select肯定是不好实现,我们可以使用div+js去模拟出来select的功能,并且又能很简单的去美化它. CSS代 ...

  4. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  5. JavaScript向select下拉框中加入和删除元素

    JavaScript向select下拉框中加入和删除元素 1.说明 a   利用append()方法向下拉框中加入元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...

  6. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  7. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  8. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  9. JavaScript获取select下拉框中的第一个值

    JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

随机推荐

  1. 根据第三方提供的wsdl报文（axis2开发），进行的webservice应用的开发实例

    接口应用名称:NgCallService 入参和出参信息 入参和出参报文信息 入参: <?xml version="1.0" encoding="UTF-8&quo ...

  2. 菜鸟译文（三）——JDK6和JDK7中substring()方法的对比

    substring(int beginIndex, int endIndex)方法在JDK6和JDK7中是不同的.了解他们的区别可以让我们更好的使用这个方法.方便起见,以下用substring() 代 ...

  3. wndows系统命令总结

    window8系统下 打开运行窗口----------鼠标放到任务栏的windows图标下,右击,弹出菜单中如上图或者 打开运行窗口---------按“WIN+R”键, cmd-------打开命令 ...

  4. 有了malloc/free为什么还要new/delete ？

    malloc与free是C++/C语言的标准库函数,new/delete是C++的运算符.它们都可用于申请动态内存和释放内存. 对于非内部数据类型的对象而言,光用maloc/free无法满足动态对象的 ...

  5. Visual Studio快捷键 [VS2008/VS2005]快捷键

    VS系统通用快捷键: 1.自动排版(类似VC6中的Alt+F8) 编辑.格式化选定内容 Ctrl + K,Ctrl + F 根据周围的代码行,正确缩进选定的代码行. 2.注释与去掉注释功能. 编辑.注 ...

  6. 无线路由器WDS 桥接设置方法

    假设现在有a b c三台路由器,现在我们把b作为中心路由器,基本的配置之后使其能正常无线上网. 然后: 无线路由器A设置: 1.修改LAN口IP地址.在网络参数-LAN口设置中,修改IP地址和B路由器 ...

  7. undercore & Backbone对AMD的支持（Require.js中如何使用undercore & Backbone）

    RequireJS填补了前端模块化开发的空缺,RequireJS遵循AMD(异步模块定义,Asynchronous Module Definition)规范,越来越多的框架支持AMD,像最近的jQue ...

  8. cakePHP的controller回调

    1. afterFilter(), executed after all controller logic, including the rendering of the view2. beforeF ...

  9. ireport 导出工具类

    Ireport 报表导出 Poi + ireport 导出pdf, word ,excel ,html 格式 下面是报表导出工具类 Ireport 报表导出 Poi + ireport 导出pdf,  ...

  10. IIS7下配置SSAS通过HTTP远程连接

    淘宝 问答 学院 博客 资源下载 高端培训                  登录 注册                                   全部问题 文章 话题 人物         ...