<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. Alpha冲刺第7天

    Alpha第7天 1.团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504 陈顺兴 031602505 张胜男 031602540 廖钰萍 031602323 雷光游 03160 ...

  2. Installing OpenSSH from the Settings UI on Windows Server 2019 or Windows 10 1809

    Installing OpenSSH from the Settings UI on Windows Server 2019 or Windows 10 1809 OpenSSH client and ...

  3. Sed 静默替换文件内容 以及 awk 的简单使用

    1. Sed的help 鸟哥说的 学东西 先看 help 先看man 再google 不好FQ再百度.. Usage: sed [OPTION]... {script-only-if-no-other ...

  4. Delphi 关于DBGrid多选删除(shitf多选，ctrl多选)

    ////删除多选记录 procedure THistoryForm.DeleteButtonClick(Sender: TObject);var  tempBookMark:TbookMark;  i ...

  5. SQLServer将一个表的数据导入到另一个表

    1.假如A表存在 insert into A(a,b,c) (select a,b,c from B) 2.假如A表不存在 select a,b,c into A from B 3.假如需要跨数据库 ...

  6. Linux_Centos7_设置MySql定时备份

    一.查看是否安装了必要的组件 [root@localhost /]# rpm -qa | grep cron cronie-1.4.11-14.el7_2.1.x86_64 cronie-anacro ...

  7. 题解 P1184 【高手之在一起】

    好!机会来了! 依评论区的要求,小金羊献上STLset<string>的题解. 当然不会告诉你map<string,bool>我根本不会用 所以,有什么内置的成员函数救救孩子? ...

  8. RSA modulus too small: 512 < minimum 768 bits

    RSA modulus too small: 512 < minimum 768 bits $ ssh admin@192.168.50.46 ssh_rsa_verify: RSA modul ...

  9. c++中的 Stl 算法(很乱别看)

    #include <iostream> #include <vector> #include <functional> #include <algorithm ...

  10. python的内置模块之os模块方法详解以及使用

    1.getcwd() 获取当前工作路径 import os print(os.getcwd()) C:\python35\python3.exe D:/pyproject/day21模块/os模块.p ...