<IGNORE_JS_OP style="WORD-WRAP: break-word">

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>DIV模拟select下拉菜单</title>
  6. <style type="text/css">
  7. .mod_select{position:absolute;left:30%;top:100px;font-familY:Arial, Helvetica, sans-serif;}
  8. .mod_select ul{margin:0;padding:0;}
  9. .mod_select ul li{list-style-type:none;float:left;margin-left:20px;height:24px;}
  10. .select_label{color:#982F4D;float:left;line-height:24px;padding-right:10px;font-size:12px;font-weight:700;}
  11. .select_box{float:left;border:solid 1px #EDE7D6;color:#444;position:relative;cursor:pointer;width:165px;background:url(../select_bg.jpg) repeat-x;font-size:12px;}
  12. .selet_open{display:inline-block;border-left:solid 1px #E5E5E5;position:absolute;right:0;top:0;width:30px;height:24px;background:url(../select_up.jpg) no-repeat center center;}
  13. .select_txt{display:inline-block;padding-left:10px;width:135px;line-height:24px;height:24px;cursor:text;overflow:hidden;}
  14. .option{width:165px;;border:solid 1px #EDE7D6;position:absolute;top:24px;left:-1px;z-index:2;overflow:hidden;display:none;}
  15. .option a{display:block;height:26px;line-height:26px;text-align:left;padding:0 10px;width:100%;background:#fff;}
  16. .option a:hover{background:#FDE0E5;}
  17. </style>
  18. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  19. <script type="text/javascript">
  20. $(document).ready(function(){
  21. $(".select_box").click(function(event){
  22. event.stopPropagation();
  23. $(this).find(".option").toggle();
  24. $(this).parent().siblings().find(".option").hide();
  25. });
  26. $(document).click(function(event){
  27. var eo=$(event.target);
  28. if($(".select_box").is(":visible") && eo.attr("class")!="option" && !eo.parent(".option").length)
  29. $('.option').hide();
  30. });
  31. /*赋值给文本框*/
  32. $(".option a").click(function(){
  33. var value=$(this).text();
  34. $(this).parent().siblings(".select_txt").text(value);
  35. $("#select_value").val(value)
  36. })
  37. })
  38. </script>
  39. </head>
  40. <body>
  41. <div class="mod_select">
  42. <ul>
  43. <li>
  44. <span class="select_label">sort buy:</span>
  45. <div class="select_box">
  46. <span class="select_txt"></span><a class="selet_open"><b></b></a>
  47. <div class="option">
  48. <a>1</a>
  49. <a>2</a>
  50. <a>3</a>
  51. </div>
  52. </div>
  53. <br clear="all" />
  54. </li>
  55. <li>
  56. <span class="select_label">View:</span>
  57. <div class="select_box">
  58. <span class="select_txt"></span><a class="selet_open"></a>
  59. <div class="option">
  60. <a>1</a>
  61. <a>2</a>
  62. <a>3</a>
  63. </div>
  64. </div>
  65. </li>
  66. </ul>
  67. <input type="hidden" id="select_value" />
  68. </div>
  69. </body>
  70. </html>

复制代码

jquery实现模拟select下拉框效果的更多相关文章

  1. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  2. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

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

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

  4. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  5. jQuery操作选中select下拉框的值

    js和jQuery联合操作dom真的很好用,如果不是专业前端人员的话,我觉得吧前端语言只要熟练掌握js和jQuery就可以了. 获取select下拉框的几种情况如下: 1.获取第一个option的值 ...

  6. jq插件又来了，模拟select下拉框，支持上下方向键哦

    好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...

  7. 用div，ul，input模拟select下拉框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. ul -- li 模拟select下拉框

    在写项目中 用到下拉框,一般用 <select name="" id=""> <option value=</option> &l ...

  9. jQuery动态生成<select>下拉框

    前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...

随机推荐

  1. jedispool资源释放

    我的天啊,这几天要被jedis逼疯了,网上好多资料并没有介绍jedis链接释放不了的方法,我确定他们那些老人肯定知道都,就是不说,你们说气人不.还有要吐槽哈jedis源码开发的那些家伙,怎么写的代码, ...

  2. Window环境下RabbitMQ的安装和配置教程

    一.安装 首先,RabbitMQ基于Erlang语言环境,所以需要先安装Erlang. Erlang下载地址:http://www.erlang.org/downloads 按照安装程序默认安装完成就 ...

  3. 常用的Hql语句

    // HQL: Hibernate Query Language.// 特点:// >> 1,与SQL相似,SQL中的语法基本上都可以直接使用.// >> 2,SQL查询的是表 ...

  4. Day25-JSONP跨域请求

    1.  json 是一种数据格式, jsonp 是一种数据调用的方式.你可以简单的理解为 带callback的json就是jsonp. 2. Python里面有个模块requests, request ...

  5. MT【90】图论基础知识及相关例题

    此讲适合参加全国联赛二试的同学 介绍图论和我们学习的一般的知识点比如函数一样,首先要介绍一些定义,只是图论里的定义相对较多,这里给出部分在竞赛中常用到的: 就像学函数的时候,学了定义和相关概念后我们要 ...

  6. 【刷题】BZOJ 4543 [POI2014]Hotel加强版

    Description 同OJ3522 数据范围:n<=100000 Solution dp的设计见[刷题]BZOJ 3522 [Poi2014]Hotel 然后发现dp的第二维与深度有关,于是 ...

  7. 解题：POJ 2888 Magic Bracelet

    题面 这题虽然很老了但是挺好的 仍然套Burnside引理(因为有限制你并不能套Polya定理),思路和这个题一样,问题主要是如何求方案. 思路是把放珠子的方案看成一张图,然后就巧妙的变成了一个经典的 ...

  8. CodeForces 获得数据

    针对程序的输出可以看见 CodeForces :当输入.输出超过一定字符,会隐藏内容 所以:分若干个程序进行输入数据的获取 1. ;i<=q;i++) { scanf("%ld%ld% ...

  9. cookie的安全性问题

    HTTP协议: (1)请求组成部分: 请求行:(get或者post请求:请求路径(不包括主机) :http1.1) 请求头:请求头是浏览器交给服务器的一些信息(比较cookie啥的) 请求体:只有po ...

  10. windows服务写完之后怎么让它跑起来

    当然你可以在命令框里面自己去手动的敲代码,也可以写一个.bat文件一劳永逸......这里我就介绍写.bat文件的方法 就是上图所示的三个东东啦,有了这三个东东,把他们拖到你windows服务的deb ...