本文实例讲述了jquery实现多条件筛选特效。分享给大家供大家参考。具体如下：
jquery实现的多条件搜索表单带日期选择表格表单效果源码，是一段实现了多个条件筛选搜索的特效代码，多条件拥有时间、地点、酒店位置及酒店名称等选项，同时在时间的输入表格中拥有时间选择功能，是一款非常实用的特效代码，值得大家学习。
运行效果图：                        -------------------查看效果 下载源码-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery实现多条件筛选特效代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>jquery多条件搜索表单带日期选择表格表单代码</title>
<link rel="stylesheet" type="text/css" href="style/list.css"/>
<link rel="stylesheet" type="text/css" href="style/manhuaDate.1.0.css"/>
<script type="text/javascript" src="JS/jquery-1.5.1.js"></script><!--日期控件，JS库版本不能过高否则tab会失效-->
<script type="text/javascript" src="JS/datejs.js"></script>
<script type="text/javascript" src="JS/ui.tab.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 var tab = new $.fn.tab({
 tabList:"#demo1 .ui-tab-container .ui-tab-list li",
 contentList:"#demo1 .ui-tab-container .ui-tab-content"
 });
 var tab = new $.fn.tab({
 tabList:"#demo1 .ui-tab-container .ui-tab-list2 li",
 contentList:"#demo1 .ui-tab-container .ui-tab-content2"
 });
});
</script>
<script type="text/javascript">
$(function (){
 $("input.mh_date").datejs({     
 Event : "click",//可选     
 Left : 0,//弹出时间停靠的左边位置
 Top : -16,//弹出时间停靠的顶部边位置
 fuhao : "-",//日期连接符默认为-
 isTime : false,//是否开启时间值默认为false
 beginY : 2010,//年份的开始默认为1949
 endY :2015//年份的结束默认为2049
 });
  
});
</script>
<script type="text/javascript">
         $(document).ready(function(e) {
            $("#selectList").find(".more").toggle(function(){
    $(this).addClass("more_bg");
    $(".more-none").show()
          },function(){
   $(this).removeClass("more_bg");
   $(".more-none").hide()
   });
   });
        </script>
<script type="text/javascript">
   $(document).ready(function(){
  var taboy_box=$(".lefttable-list");
  taboy_box.children("tbody").find("tr:gt(2)").hide();
  $(".leftbox-morea").toggle(function(){
  $(this).parent().prev().find("tr").show();
  $(this).addClass("more-i")
  },function(){
  $(this).removeClass("more-i");
  $(this).parent().prev().children("tbody").find("tr:gt(2)").hide();
  }
  );
 });
  </script>
</head>
 
<body>
<br>
<div class="w1200">
 <div class="list-screen">
  <div class="screen-top" style="position:relative;"><span>目的地<input id="txtadress" type="text"/></span><span>入住<input type="text" class="mh_date" readonly="true" /></span><span>退房<input type="text" class="mh_date" readonly="true" /></span><span>酒店位置<input type="text" class="ju-adress" /></span><span>酒店名称<input type="text" class="ju-name" /></span><a href="#" id="submit-btn"/>搜索</a></div>
  <div style="padding:10px 30px 10px 10px;"><div class="screen-address">
   <div class="list-tab">
    <div id="demo1" class="clearfix">
     <div class="jiud-name">酒店位置</div>
     <div class="ui-tab-container">
      <ul class="clearfix ui-tab-list">
       <li class="ui-tab-active">景点</li>
       <li>交通枢纽</li>
       <li>地铁周边</li>
       <li>行政区</li>
      </ul>
      <div class="ui-tab-bd">
       <div class="ui-tab-content clearfix">
         <ul class="clearfix ui-tab-list2">
           <li class="ui-tab-active">景点</li>
           <li>交通枢纽</li>
          </ul>
          <div class="ui-tab-bd">
         <div class="ui-tab-content2 clearfix"><p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          琶洲展馆</label>
        </p>
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          淘金/环市东 </label>
        </p></div>
            <div class="ui-tab-content2 clearfix" style="display:none">22222</div>
          </div>
       </div>
       <div class="ui-tab-content clearfix" style="display:none">
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          琶洲展馆</label>
        </p>
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          淘金/环市东 </label>
        </p>
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          广州东站/天河北</label>
        </p>
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          北京路/海珠广场</label>
        </p>
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          珠江新城/跑马场 </label>
        </p>
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          长隆景区/广州南站</label>
        </p>
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          沙面/上下九步行</label>
        </p>
       </div>
       <div class="ui-tab-content clearfix" style="display:none">
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          琶洲展馆</label>
        </p>
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          淘金/环市东 </label>
        </p>
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          广州东站/天河北</label>
        </p>
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          北京路/海珠广场</label>
        </p>
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          珠江新城/跑马场 </label>
        </p>
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          长隆景区/广州南站</label>
        </p>
        <p>
         <label>
          <input name="tabrad1" type="radio" value="" />
          沙面/上下九步行</label>
        </p>
       </div>
       <div class="ui-tab-content clearfix" style="display:none">
        <p>
         <input name="tabrad1" type="radio" value="" />
         琶洲展馆</p>
        <p>
         <input name="tabrad1" type="radio" value="" />
         淘金/环市东 </p>
        <p>
         <input name="tabrad1" type="radio" value="" />
         广州东站/天河北</p>
        <p>
         <input name="tabrad1" type="radio" value="" />
         北京路/海珠广场</p>
        <p>
         <input name="tabrad1" type="radio" value="" />
         珠江新城/跑马场 </p>
        <p>
         <input name="tabrad1" type="radio" value="" />
         长隆景区/广州南站</p>
        <p>
         <input name="tabrad1" type="radio" value="" />
         沙面/上下九步行</p>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="screen-term">
   <div class="selectNumberScreen">
    <div id="selectList" class="screenBox screenBackground">
     <dl class="listIndex" attr="价格范围">
      <dt>酒店价格</dt>
      <dd>
       <label><a href="javascript:;" values2="" values1="" attrval="不限">不限</a></label>
       <label>
        <input name="radio2" type="radio" value="" />
        <a href="javascript:;" values2="99" values1="1" attrval="1-99">100元以下</a></label>
       <label>
        <input name="radio2" type="radio" value="" />
        <a href="javascript:;" values2="300" values1="100" attrval="100-300">100-300元 </a></label>
       <label>
        <input name="radio2" type="radio" value="" />
        <a href="javascript:;" values2="600" values1="300" attrval="300-600">300-600元</a></label>
       <label>
        <input name="radio2" type="radio" value="" />
        <a href="javascript:;" values2="1500" values1="600" attrval="5000以上">600-1500元</a></label>
       <div class="custom"><span>自定义</span> 
        <input name="" type="text" id="custext1"/>
         - 
        <input name="" type="text" id="custext2"/>
        <input name="" type="button" id="cusbtn"/>
       </div>
      </dd>
     </dl>
     <dl class=" listIndex" attr="terminal_os_s">
      <dt>酒店星级</dt>
      <dd>
       <label><a href="javascript:;" values2="" values1="" attrval="不限">不限</a> </label>
       <label>
        <input name="checkbox2" type="checkbox" value="" autocomplete="off"/>
        <a href="javascript:;" values2="" values1="" attrval="android"> 五星/豪华</a> </label>
       <label>
        <input name="checkbox2" type="checkbox" value="" autocomplete="off"/>
        <a href="javascript:;" values2="" values1="" attrval="symbian">四星/高档</a></label>
       <label>
        <input name="checkbox2" type="checkbox" value="" autocomplete="off"/>
        <a href="javascript:;" values2="" values1="" attrval="百度易平台">三星/舒适</a></label>
      </dd>
     </dl>
     <dl class="listIndex" attr="terminal_brand_s">
      <dt>主题风格</dt>
      <dd data-more=true>
       <label><a href="javascript:;" values2="" values1="" attrval="不限">不限</a></label>
       <label>
        <input name="checkbox2" type="checkbox" value="" autocomplete="off"/>
        <a href="javascript:;" values2="" values1="" attrval="小米">客栈</a></label>
       <label>
        <input name="checkbox2" type="checkbox" value="" autocomplete="off"/>
        <a href="javascript:;" values2="" values1="" attrval="华为">精品酒店</a> </label>
       <label>
        <input name="checkbox2" type="checkbox" value="" autocomplete="off"/>
        <a href="javascript:;" values2="" values1="" attrval="lenovo">情侣酒店</a> </label>
       <label>
        <input name="checkbox2" type="checkbox" value="" autocomplete="off"/>
        <a href="javascript:;" values2="" values1="" attrval="zte中兴">园林庭院</a></label>
        <span class="more"><em class="open"></em>更多</span>
        </dd>
     </dl>
     <dl class="listIndex more-none" attr="terminal_brand_s" style="display:none;border:none">
      <dt style='visibility:hidden'>主题风格</dt>
      <dd >
       <label style='visibility:hidden'><a href="javascript:;" values2="" values1="" attrval="不限">不限</a></label>
       <form action="" method="get">
         <label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;" values2="" values1="" attrval="华为">精品酒店2</a></label>
         <label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;" values2="" values1="" attrval="华为">精品酒店3</a> </label>
         <label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;" values2="" values1="" attrval="华为">精品酒店4</a> </label>
        </form>
     </dl>
    </div>
   </div> 
  </div>
 
  </div>
   
  <div class="hasBeenSelected clearfix"><span id="time-num"><font>208</font>家酒店</span>
     <div style="float:right;" class="eliminateCriteria">【清空全部】 </div>
     <dl>
      <dt>已选条件：</dt>
      <dd style="DISPLAY: none" class=clearDd>
       <div class=clearList></div>
     </dl>
    </div>
   <script type="text/javascript" src="JS/shaixuan.js"></script>
 </div>
</div>
</body>
</html>

以上就是为大家分享的jquery实现多条件筛选特效代码，希望大家可以喜欢。

jquery实现多条件筛选特效代码分享的更多相关文章

  1. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  2. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  3. Jquery特效之=》仿京东多条件筛选特效

    仿京东多条件筛选特效 * { margin: 0; padding: 0; list-style-type: none } a, img { border: 0 } body { font: 12px ...

  4. 基于jQuery发展历程时间轴特效代码

    分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="time ...

  5. 基于jQuery图片弹出翻转特效代码

    分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代 ...

  6. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

  7. jQuery下拉友情链接美化效果代码分享

    这篇文章主要介绍了jQuery下拉友情链接美化效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下. 文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQu ...

  8. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  9. jQuery插件库代码分享 - 进阶者系列 - 学习者系列文章

    这些天将原来在网上找的jQuery插件进行了下整理,特此将代码分享出来给大家. 见下图结构. 对目录结构进行了分类.这里是插件列表. 这里总共收集了20来个插件.还有下面未进行划分的. 下面是DEMO ...

随机推荐

  1. 关于对WEB标准以及W3C的理解与认识问题

    web标准简单来说可以分为结构.表现和行为.其中结构主要是有HTML标签组成.或许通俗点说,在页面body里面我们写入的标签都是为了页面的结构.表现即指css样式表,通过css可以是页面的结构标签更具 ...

  2. WebService小记

    这个问题找了好多地方都没有结果,自己暂且总结一下吧,也不算是解决问题的根本途径,但是也不失为一种办法.当时用了wsimport  wsdl2java xfire 都没有解决,大牛能解决的话,欢迎留言. ...

  3. java利用反射获取类的属性及类型

    java利用反射获取类的属性及类型. import java.lang.reflect.Field; import java.math.BigDecimal; import java.util.Map ...

  4. 利用 Traceview 精准定位启动时间测试的异常方法 (工具开源)

    机智的防爬虫标识原创博客地址:http://www.cnblogs.com/alexkn/p/7095855.html博客求关注: http://www.cnblogs.com/alexkn 1.启动 ...

  5. HDFS Java API的使用举例

    HDFS是Hadoop应用程序使用的主要分布式存储.HDFS集群主要由管理文件系统元数据的NameNode和存储实际数据的DataNodes组成,HDFS架构图描述了NameNode,DataNode ...

  6. require.js详解

    一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染 ...

  7. VIM基础知识整理(附思维导图)

    这是当时初学VIM后做的一个思维导图,图片稍大,所以从freemind导出了html文本po在下面:图片在最下方,放大可清晰浏览. VIM 普通模式 普通编辑命令 功能:浏览,普通编辑 x:删除光标所 ...

  8. 浅入深出之Java集合框架（上）

    Java中的集合框架(上) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,如果已经有java基础的小伙伴可以直接跳到<浅入深出之Java集合框架 ...

  9. 搭建ES6运行环境

    当ES5还没有完全普及时,ES6就接踵而来了,2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015,我们也简称它为ES6或ES2015.在发布之后的将近一年内, ...

  10. 记一次SAP新业务开发项目

    直到笔者写这篇博文的时候,这个开发项目名义上已经上线,但其实开发以及优化的工作还在继续,数据的修复也仍在继续... IT系统环境很简单,一个基于JAVA+Mysql的Web平台,一个是宇宙第一的SAP ...