<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. Ubuntu安装jdk，正确配置环境变量

    作为一个Linux新手,在写这篇博客之前,装了几次jdk,好多次都是环境变量配置错误,导致无法登录系统.经过几天的研究,今天新装系统,从头来完整配置一遍 系统版本:Ubuntu 16.04 JDK版本 ...

  2. meta-inf文件夹以及MANIFEST.MF文件的作用

    meta-inf相当于一个信息包,目录中的文件和目录获得Java 2平台的认可与解释,用来配置应用程序.扩展程序.类加载器和服务 manifest.mf文件,在用jar打包时自动生成的. META-I ...

  3. Windows 下 Docker 的简单学习使用过程之二 Docker For windows

    1. Docker For windows 最新版也支持到了 docker ce 18.06 (这个博客的编写时间是 2018.8.17 当时是最新的) 2. 下载安装. 大概500m 左右的安装文件 ...

  4. 【题解】 [POI2012]FES-Festival （差分约束）

    懒得复制题面,戳我戳我 Question: (因为网上找不到好的翻译,这里简单复述一下) 告诉你\(m1+m2\)个约束条件,然后要你找出\(X_1-X_n\)这些数字,求满足要求的数列中不同的数字个 ...

  5. Elastic-Job-Lite 源码分析 —— 运维平台

    本文基于 Elastic-Job V2.1.5 版本分享 1. 概述 2. Maven模块 elastic-job-common-restful 3. Maven模块 elastic-job-cons ...

  6. 自学huawei之路-AC6005-8AP添加授权码

    返回自学Huawei之路 自学huawei之路-AC6005-8AP添加授权码

  7. HGOI20181031 模拟题解

    sol:第一题就DP?!然后写了O(n^2) dp再考虑优化!!!(尽量部分分带上!!!) 我写了正确的dp然后优化错了,具体的dp方法是考虑到对于右侧到左侧他是没有后效性的 所以定义f[i]为i及以 ...

  8. POJ 2251 Dungeon Master /UVA 532 Dungeon Master / ZOJ 1940 Dungeon Master（广度优先搜索）

    POJ 2251 Dungeon Master /UVA 532 Dungeon Master / ZOJ 1940 Dungeon Master(广度优先搜索) Description You ar ...

  9. ByteBuffer的allocate与allocateDirect2013-01-11

    在Java中当我们要对数据进行更底层的操作时,通常是操作数据的字节(byte)形式,这时常常会用到ByteBuffer这样一个类.ByteBuffer提供了两种静态实例方式:   public sta ...

  10. linux开启swap（磁盘缓存）操作

    转载 2014年04月26日 14:41:15 4470 由于工作需要,要帮助同事查看linux服务器的缓存开启情况,经过查找资料,可确定通过以下方法确定Linux磁盘缓存是否已开启. 1.命令行下执 ...