首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现多条件筛选特效代码，希望大家可以喜欢。

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
javascript数组组合成字符串的脚本
Jan 06 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
jquery判断字符输入个数（数字英文长度记为1，中文记为2，超过长度自动截取）
Oct 15 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 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
沃尔沃(1) 77A(2) 军机(1) VOLVO(1) 收信机(3) MOTOROLA(1) 晶体管(2) 66-XI(1) S900(1) 摩托罗拉(1)
You might like
PHP之变量、常量学习笔记
2008/03/27 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
js模拟类继承小例子
2010/07/17 Javascript
JavaScript类库D
2010/10/24 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Django中处理出错页面的方法
2015/07/15 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
安装docker-compose的两种最简方法
2019/07/30 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
安德玛比利时官网：Under Armour比利时
2019/08/28 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
经典演讲稿开场白
2014/08/25 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
员工聘用合同范本
2015/09/21 职场文书
保安辞职申请书应该怎么写？
2019/07/15 职场文书