<!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. 我常用的Mac快捷键

    1. 最小化当前窗口 command m 2. 在不同应用间切换 command tab 3. 在同一应用的不同窗口间切换 command ` 4. 在浏览器同一窗口的不同标签间切换 ctrl tab ...

  3. [原]unity5 AssetBundle打包

    本文unity版本5.1.3 一.现有的打包教程: 1.http://liweizhaolili.blog.163.com/blog/static/16230744201541410275298/ 阿 ...

  4. Moto G 通话没声音

    入手了摩托罗拉被 Google 收购后推出的第二款手机 Moto G (第一款是 Moto X) 后发现有个问题,有时候会莫名其妙地通话没声音,你听不到对方的,对方也听不到你的,从网上的搜索结果来看, ...

  5. DataGridView中添加CheckBox列用于选择行

    DataGridView中添加CheckBox列用于选择行 1,编辑DataGridView,添加一列 CheckBox ,Name 赋值为 "select",如下图: 2,取消 ...

  6. C2C,B2C,F2C三种电商运营模式的比较

      第三方模式(C2C) 销售商模式(B2C) 生产商模式(F2C) 概念及简介 第三方平台提供商模式是电子商务的最原始也是最自然的形式.这种模式一般都是由信息技术开发商负责建立平台,利用平台扩展电子 ...

  7. asp.net mvc 利用过滤器进行网站Meta设置

    过去几年都是用asp.net webform进行开发东西,最近听说过时了,同时webform会产生ViewState(虽然我已经不用ruanat=server的控件好久了 :)),对企业应用无所谓,但 ...

  8. WebKit内核分析之Page

    参考地址:http://blog.csdn.net/dlmu2001/article/details/6213377 注:本系列博客是在原博主博客基础上增加了自己的理解和片段,可以看源博文获得清晰的结 ...

  9. [原]如何在Android用FFmpeg+SDL2.0解码图像线程

    关于如何在Android上用FFmpeg+SDL2.0解码显示图像参考[原]如何在Android用FFmpeg+SDL2.0解码显示图像 ,关于如何在Android使用FFmpeg+SDL2.0解码声 ...

  10. CentOS下mysql安装和配置

    1.卸载原有mysql [root@iZ25ka6ra32Z /]# rpm -qa | grep mysql 查看该操作系统上是否已经安装了mysql数据库.有的话,我们就通过 rpm -e 命令 ...