您现在的位置： 365建站网 > 365文章 > jquery中select下拉框特效实例

jquery中select下拉框特效实例

文章来源：365jz.com     点击数：555    更新时间：2018-06-14 09:06   参与评论

插件描述：基于jQuery的简单下拉框插件，可用来替换原生的option，IE10以下未测试。

  1. Nicescroll滚动条插件是一个非常强大的基于JQUERY的滚动条插件，不需要增加额外的css，几乎全浏览器兼容。ie6+，实现只需要一段代码，侵入性非常小，样式可完全自定义，支持触摸事件，可在触摸屏上使用。

  2. jquery-jSelect.min.js下拉框选择

11.jpg


jquery中select下拉框特效实例使用方法

1、定义select标签，option元素，select标签需要加上id属性：

 

</>code
  1. <div class="form">
  2.     <select id="city" class="select">
  3.         <option value="贵阳">贵阳</option>
  4.         <option value="六盘水">六盘水</option>
  5.         <option value="都匀">都匀</option>
  6.         <option value="福泉">福泉</option>
  7.         <option value="遵义">遵义</option>
  8.         <option value="兴义">兴义</option>
  9.         <option value="安顺">安顺</option>
  10.         <option value="凯里">凯里</option>
  11.         <option value="毕节">毕节</option>
  12.     </select>
  13. </div>

   

2、在页面引入CSS和js文件

  

</>code
  1. <link rel="stylesheet" href="css/j-select.css" />
  2. <script src="js/nicescroll/jquery-nicescroll.js"></script><!-- 使用了nicescroll插件美化下拉框的滚动条 -->
  3. <script src="js/jquery-jSelect.min.js" ></script>

3、页面中加入如下代码

   

</>code
  1. <script type="text/javascript">
  2.     $(".select").jSelect();
  3. </script>

   

jquery中select下拉框特效实例：

</>code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>jquery-select</title>
  6. <style type="text/css">
  7. * {
  8. margin:0;padding:0;list-style:none;
  9. }
  10. body {
  11. font-size:12px;overflow-y: scroll;
  12. }
  13. .form {
  14. width:500px; margin:100px auto;border:1px solid #ccc;padding:5px;
  15. }
  16. </style>
  17. <link rel="stylesheet" href="css/j-select.css" />
  18. </head>
  19. <body>
  20. <!--
  21. <div id="mySelect_select" class="j_select">
  22. <div id="mySelect_current_select" class="current_select" tabindex="0">
  23. <span class="current_select_text"></span>
  24. <span class="select_icon">
  25. <svg width="13" height="13" viewBox="0 0 200 200">
  26. <g class="transform-group">
  27. <g transform="scale(0.1953125, 0.1953125)">
  28. <path d="M818.393225 300.939003c12.824073-14.09502 34.658358-15.126512 48.752354-2.303462 14.09502 12.843516 15.126512 34.678824 2.302439 48.752354l-332.676845 364.835266c-12.844539 14.114462-34.659381 15.127536-48.753377 2.302439-0.815575-0.733711-1.588171-1.486864-2.302439-2.302439l-0.080841-0.078795-0.13917-0.13917L153.018046 347.388918c-12.824073-14.074553-11.791557-35.909861 2.302439-48.752354 14.09502-12.824073 35.930327-11.792581 48.753377 2.303462l307.168891 336.845795 307.149449-336.845795L818.393225 300.939003 818.393225 300.939003z" fill="#272636"></path>
  29. </g>
  30. </g>
  31. </svg>
  32. </span>
  33. </div>
  34. <ul tabindex="1"></ul>
  35. </div>
  36. -->
  37. <div class="form">
  38. <select id="mySelect" class="select">
  39. <option value="贵州省">贵州省</option>
  40. <option value="云南省">云南省</option>
  41. <option value="重庆市">重庆市</option>
  42. <option value="湖南省">湖南省</option>
  43. <option value="四川省">四川省</option>
  44. <option value="广东省">广东省</option>
  45. <option value="广西壮族自治区">广西壮族自治区xxxxxxxxxxxxxxxxx</option>
  46. <option value="安徽省">安徽省</option>
  47. <option value="北京市">北京市</option>
  48. <option value="天津市">天津市</option>
  49. <option value="广东省">广东省</option>
  50. <option value="广西壮族自治区">广西壮族自治区</option>
  51. <option value="安徽省">安徽省</option>
  52. <option value="北京市">北京市</option>
  53. <option value="天津市">天津市</option>
  54. <option value="广东省">广东省</option>
  55. <option value="广西壮族自治区">广西壮族自治区</option>
  56. <option value="安徽省">安徽省</option>
  57. <option value="北京市">北京市</option>
  58. <option value="天津市">天津市</option>
  59. <option value="广东省">广东省</option>
  60. <option value="广西壮族自治区">广西壮族自治区</option>
  61. <option value="安徽省">安徽省</option>
  62. <option value="北京市">北京市</option>
  63. <option value="天津市">天津市</option>
  64. </select>
  65. </div>
  66. <div class="form">
  67. <select id="city" class="select">
  68. <option value="贵阳">贵阳</option>
  69. <option value="六盘水">六盘水</option>
  70. <option value="都匀">都匀</option>
  71. <option value="福泉">福泉</option>
  72. <option value="遵义">遵义</option>
  73. <option value="兴义">兴义</option>
  74. <option value="安顺">安顺</option>
  75. <option value="凯里">凯里</option>
  76. <option value="毕节">毕节</option>
  77. </select>
  78. </div>
  79. <div class="form">
  80. <select id="year" class="select">
  81. <option value="1990">1990</option>
  82. <option value="1991">1991</option>
  83. <option value="1992">1992</option>
  84. <option value="1993">1993</option>
  85. <option value="1994">1994</option>
  86. <option value="1995">1995</option>
  87. <option value="1996">1996</option>
  88. </select>年
  89. <select id="month" class="select">
  90. <option value="1">1</option>
  91. <option value="2">2</option>
  92. <option value="3">3</option>
  93. <option value="4">4</option>
  94. <option value="5">5</option>
  95. <option value="6">6</option>
  96. <option value="7">7</option>
  97. <option value="8">8</option>
  98. <option value="9">9</option>
  99. <option value="10">10</option>
  100. <option value="11">11</option>
  101. <option value="12">12</option>
  102. </select>月
  103. <select id="day" class="select">
  104. <script>
  105. for (var i = 1; i <= 31; i++) {
  106. document.write('<option value="'+ i +'">'+ i +'</option>');
  107. }
  108. </script>
  109. </select>日
  110. </div>
  111. <script src="https://www.365jz.com/common/jquery/1.8.3/jquery.min.js"></script>
  112. <script src="https://www.365jz.com/common/jquery/nicescroll/jquery-nicescroll.js"></script>
  113. <script src="https://www.365jz.com/common/jquery/jquery-jSelect.min.js" ></script>
  114. <script type="text/javascript">
  115. //$("#mySelect").jSelect();
  116. //$("#city").jSelect();
  117. $(".select").jSelect();
  118. </script>
  119. </body>
  120. </html>


css:

</>code
  1. .j_select {
  2. margin:0;padding:0;cursor:pointer;position: relative;background:#fff;display:inline-block;
  3. }
  4. .j_select .current_select {
  5. margin:0;padding:0;height:30px;line-height:30px;text-indent:1em;border:1px solid #ccc;box-shadow:1px 1px 2px #ccc;
  6. outline:none;
  7. }
  8. .j_select .current_select .select_icon {
  9. margin:0;padding:0;position:absolute;right:5px;top:5px;
  10. }
  11. .j_select ul {
  12. margin:0;padding:0;border:1px solid #eee;border-radius:2px;display:none;box-shadow:1px 1px 2px #ccc;background:#fff;
  13. position:absolute;width:calc(100% - 2px) !important;max-height:302px;overflow:auto;outline:none;z-index:99 !important;
  14. }
  15. .j_select ul li {
  16. margin:0;padding:0;line-height:30px;text-indent:1em;list-style:none;
  17. }
  18. .j_select ul li:hover {
  19. background:#f90;color:#fff;cursor:default;
  20. }
  21. .j_select ul li.current_item {
  22. background:#f90;color:#fff;cursor:default;
  23. }


jquery中select下拉框特效实例下载：

jquery-select20160831.zip


如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (555人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号