<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. Docker(二)-Docker安装

    官方文档:https://docs.docker.com/ Docker 支持多平台的安装(Linux/Windows/OS X). 因为Docker原生支持Linux,所以,可以直接在Linux上运 ...

  2. ubuntu 16.04 kdump 使用

    1.安装linux-crashdump及kdump sudo apt-get install linux-crashdump sudo apt-get install kexec-tool 2.重启电 ...

  3. hdu 2586 How far away ？（LCA - Tarjan算法 离线 模板题）

    How far away ? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  4. Day23-Model操作，Form操作和序列化操作

    参考源出处:http://blog.csdn.net/fgf00/article/details/54629502 1. 搭建环境请参考:http://www.cnblogs.com/momo8238 ...

  5. 【HDU 5858】Hard problem（圆部分面积）

    边长是L的正方形,然后两个半径为L的圆弧和中间直径为L的圆相交.求阴影部分面积. 以中间圆心为原点,对角线为xy轴建立直角坐标系. 然后可以联立方程解出交点. 交点是$(\frac{\sqrt{7} ...

  6. 【BZOJ1559】[JSOI2009]密码（AC自动机，动态规划，搜索）

    [BZOJ1559][JSOI2009]密码(AC自动机,动态规划,搜索) 题面 BZOJ 洛谷 题解 首先求方案数显然是构建\(AC\)自动机之后再状压\(dp\),似乎没有什么好讲的. 现在考虑答 ...

  7. BZOJ 4361 isn | DP 树状数组

    链接 BZOJ 4361 题面 给出一个长度为n的序列A(A1,A2...AN).如果序列A不是非降的,你必须从中删去一个数, 这一操作,直到A非降为止.求有多少种不同的操作方案,答案模10^9+7. ...

  8. 【转】树莓派Raspberry Pi - 还原已经装过系统的TF卡

    想给树莓派换个系统的话,需要先把已经装过系统的TF卡进行还原,这里使用最简单粗暴无脑的方法: 1,下载安装Win32 Disk Imager(一般已经装过一次系统后,这个东西都有) 2,下载boots ...

  9. 置换群和Burnside引理，Polya定理

    定义简化版: 置换,就是一个1~n的排列,是一个1~n排列对1~n的映射 置换群,所有的置换的集合. 经常会遇到求本质不同的构造,如旋转不同构,翻转交换不同构等. 不动点:一个置换中,置换后和置换前没 ...

  10. 「Vue」路由

    Vue-routerrouter-link active-class类型: string默认值: "router-link-active"设置 链接激活时使用的 CSS 类名.默认 ...