<!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. 【C】——幻方算法

    一.幻方按照阶数可分成了三类,即奇数阶幻方.双偶阶幻方.单偶阶幻方. 二.奇数阶幻方(劳伯法) 奇数阶幻方最经典的填法是罗伯法.填写的方法是: 把1(或最小的数)放在第一行正中:按以下规律排列剩下的( ...

  2. MVC4研发中遇到问题【持续总结....】

    第一: 编译器错误消息: CS0012: 类型“System.Data.Objects.DataClasses.EntityObject”在未被引用的程序集中定义.必须添加对程序集 “System.D ...

  3. MassTransit RabbitMQ 参考文档

    Autofac http://docs.autofac.org/en/latest/lifetime/startup.html RabbitMQ http://www.rabbitmq.com/dot ...

  4. android学习者优秀网址推荐

    非常漂亮的android UI库集合,别人整理的,如果感觉不错,赶快收藏吧!! https://github.com/wasabeef/awesome-android-ui https://githu ...

  5. 构建基于WinRT的WP8.1 App 02：数据绑定新特性

    基于WinRT的Windows Phone 8.1以及Windows 8.1中Xaml数据绑定增加了一些新特性. FallBackValue属性:FallBackValue在绑定的值属性值不存在时,可 ...

  6. WinStore之Application Data

    一.Application Data简介 Applicaion Data相当于桌面应用的注册表,存储一些用户配置信息,如运行时状态,用户喜好等,需要注意的时,当卸载应用时,这些数据会被删除,所以不要存 ...

  7. WindowsStore页面导航

    第一个页面:前台 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> &l ...

  8. 使用 Windows10 自定义交互消息通知

    消息通知是最常用的应用功能之一了,但是由于平台的差异,IOS Android 以及 Windows 都有其特殊性,Android开发者在国内常常都是使用三方的一些推送服务,或者是使用自建的服务器为应用 ...

  9. Bulk Insert的用法 .

    /******* 导出到excel */EXEC master..xp_cmdshell 'bcp SettleDB.dbo.shanghu out c:/temp1.xls -c -q -S&quo ...

  10. POJ 2083 Fractal

    Fractal Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 6646   Accepted: 3297 Descripti ...