<!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. A Simple MVVM Example[Forward]

    In my opinion, if you are using WPF or Silverlight you should be using the MVVM design pattern. It i ...

  2. Linux之crontab

    一  cron crond位于/etc/rc.d/init.d/crond 或 /etc/init.d 或 /etc/rc.d /rc5.d/S90crond,最总引用/var/lock/subsys ...

  3. 【转】TCP协议的无消息边界问题

    http://www.cnblogs.com/eping/archive/2009/12/12/1622579.html   使用TCP协议编写应用程序时,需要考虑一个问题:TCP协议是无消息边界的, ...

  4. C++读取mysql中utf8mb4编码表数据乱码问题及UTF8转GBK编码

    数据库编码为utf8,但是由于某些表的一些字段存储了emoji字符,表采用了utf8mb4编码,默认情况下在C++代码中读出的中文字段值都变成了乱码. 解决方法为,在进行数据库查询前,在C++中执行一 ...

  5. iOS10 CoreData新特性

    原文地址:What's New in Core Data in macOS 10.12, iOS 10.0, tvOS 10.0, and watchOS 3.0 翻译者:肖品,原创文章转载请著名出处 ...

  6. Ubuntu14.04手动创建桌面快捷方式

    如果是系统自带的程序,默认的桌面图标放在 /usr/share/applications/下面,可以直接将对应的图标放到当前用户的~/Desktop/目录下即可 如果是从网上下载已编译的二进制文件(e ...

  7. 彻底解决Google浏览器CSS居中问题

    div做的界面时,又出现CSS hack(CSS兼容浏览器问题)在IE内核浏览器或者firefox浏览器中都能居中,没有居中的可以用其特殊标签来设定居中,如下划线 _ IE6优先识别,!importa ...

  8. ZooKeeper与Curator注册和监控

    Curator提供了对zookeeper客户端的封装,并监控连接状态和会话session,特别是会话session过期后,curator能够重新连接zookeeper,并且创建一个新的session. ...

  9. 使用grunt构建seajs项目

    1.安装nodejs 2.安装grunt-cli npm install -g grunt-cli 3.进入到项目目录,同时准备好package.json和Gruntfile.js文件 //packa ...

  10. BZOJ 1001 [BeiJing2006] 狼抓兔子（平面图最大流）

    题目大意 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的.而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个网格的地形: ...