jquery实现多条件筛选特效代码分享


Posted in Javascript onAugust 28, 2015

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

jquery实现多条件筛选特效代码分享

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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实现多条件筛选特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 #Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 #Javascript
谈谈JavaScript中function多重理解
Aug 28 #Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 #Javascript
jQuery表单验证功能实例
Aug 28 #Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 #Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 #Javascript
You might like
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
php通过修改header强制图片下载的方法
2015/03/24 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Python中的random()方法的使用介绍
2015/05/15 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
应届毕业生求职自荐书
2014/01/03 职场文书
建材投资建议书
2014/05/16 职场文书
建筑结构施工求职信
2014/07/11 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
vue中div禁止点击事件的实现
2022/04/02 Vue.js