<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. Beta阶段敏捷冲刺前准备

    一.介绍小组新加入的成员,Ta担任的角色. 新成员一:徐璐琳 风格:酷酷哒 擅长的技术:JAVA,CCNP 编程的兴趣:折磨人的快感 新角色:管理员 一句话宣言:打开开关又是一个机会 新成员二:祁泽文 ...

  2. final发布评论Ⅱ

    奋斗吧兄弟:奋斗吧兄弟团队提供了草原.水域.田地三种环境可以进行选择.功能如下:添加自定义生物功能可以增加生物种类,但是无法设置捕食关系,这里希望想办法完善.生物除了图片方式以外,还可以以文字的方式展 ...

  3. mysql 列转行处理

    CREATE TABLE `table1` ( `id` ) DEFAULT NULL, `name` ) CHARACTER SET utf8 DEFAULT NULL ) ENGINE=MyISA ...

  4. adb 安装apk报INSTALL_FAILED_NO_MATCHING_ABIS

    想在模拟器中安装搜狗拼音输入法,结果安装的时候报错:INSTALL_FAILED_NO_MATCHING_ABIS 上网搜索发现解决方法如下: 原博客:使用Genymotion调试出现错误INSTAL ...

  5. STM32配置GPIO前须先打开其时钟，否则配置失败

    @2018-5-9 17:11:38 STM32配置GPIO前须先打开其时钟,否则配置失败

  6. Oracle数据库--PL/SQL存储过程和函数的建立和调用

    1.存储过程建立的格式: create or replace procedure My_Procedure is begin --执行部分(函数内容); end; / 例子:(以hr表为例) crea ...

  7. 【POJ3171】Cleaning Shifts 带权区间最小覆盖

    题目大意:给定一个长度为 N 的序列,求带权区间最小覆盖. 题解:设 \(dp[i]\) 表示从左端点到 i 的最小权值是多少,则状态转移为:\(dp[e[i].ed]=min\{dp[j],j\in ...

  8. 8: springMVC ModelAndView 作用与功能解析

    Spring mvc视图机制 所有的web应用的mvc框架都有它定位视图的方式.Spring提供了视图解析器供你在浏览器中显示模型数据,而不必被拘束在特定的视图技术上. Spring的控制器Contr ...

  9. Python 内置函数---map()

    描述 map() 实现对一个可迭代对象中的每一个元素都应用一个函数 将被传入的函数作用到一个可迭代对象的每一个元素上,并且返回了包含了所有这些函数调用结果的一个迭代器. 由于map期待传入一个函数并会 ...

  10. Saltstack-API（十二）

    Saltstack-API 官方文档 https://docs.saltstack.com/en/latest/ref/netapi/all/salt.netapi.rest_cherrypy.htm ...