<!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. RAID卡

        简单的说,RAID是一种把多块独立的物理硬盘按不同方式组合起来形成一个逻辑硬盘,从而提供比单个硬盘有着更高的性能和提供数据冗余的技术.     RAID卡一般分为硬RAID卡和软RAID卡两种 ...

  2. ubuntu系统中的VMware 安装win7 Ghost镜像的几个坑

    1.ghost镜像安装时要先分区 2.分区后要激活 3.VM(虚拟机安装win7 提示 :units specified don't exist, SHSUCDX can't install)解决方法 ...

  3. 第一章：Symfony2和HTTP基本原理

    恭喜你!通过学习Symfony2,你将用你自己的方式开发出更加高效.全面和流行的Web应用(当然,要受到用人单位或同行的欢迎,还是得靠你自己).Symfony2的存在是为了要解决最根本的问题:即提供一 ...

  4. POJ-1475-Pushing Boxes(BFS)

    Description Imagine you are standing inside a two-dimensional maze composed of square cells which ma ...

  5. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  6. 增大VM下linux的根目录空间

    增大VM下linux的根目录空间   用的太久,发现VM下的系统空间不足.简单的方法是,分一个新硬盘,挂载到根目录下.    下面是直接增大根目录下空间:  1. 增大vm下的磁盘大小, VM -&g ...

  7. 从javascript一道闭包面试题说开去

    这道题目比较经典了: var a = 1; function test(){ a = 2; return function(){ console.log(a); } var a = 3; } test ...

  8. 理解RxJava:(三)RxJava的优点

    理解RxJava:(三)RxJava的优点 在第一部分,讲解了RxJava的基本结构.在第二部分,展示了operators的强大之处.但是你们可能仍然没有被说服,也没有足够的理由信服.下面是一些能让你 ...

  9. 十一、EnterpriseFrameWork框架的分层与系统业务的结合

    上章详细讲了EnterpriseFrameWork框架中的每个分层,这都是从技术层面来说明,也就是我们知道怎么来建一个控制器或一个业务对象,但开发过程中应该建一个什么样的控制器或业务对象了?本章的主要 ...

  10. NSDictionary 的有序性 （by the key in some rule）

    NSDictionary 的有序性: (by the key in some rule) NSDictionary*myDictionary =[NSDictionary dictionaryWith ...