jquery實(shí)現(xiàn)多條件篩選特效代碼分享
更新時(shí)間：2015年08月28日 10:23:18 投稿：lijiao
這篇文章主要介紹了jquery實(shí)現(xiàn)多條件篩選特效，推薦給大家，有需要的小伙伴可以參考下。
本文實(shí)例講述了jquery實(shí)現(xiàn)多條件篩選特效。分享給大家供大家參考。具體如下：
jquery實(shí)現(xiàn)的多條件搜索表單帶日期選擇表格表單效果源碼，是一段實(shí)現(xiàn)了多個(gè)條件篩選搜索的特效代碼，多條件擁有時(shí)間、地點(diǎn)、酒店位置及酒店名稱等選項(xiàng)，同時(shí)在時(shí)間的輸入表格中擁有時(shí)間選擇功能，是一款非常實(shí)用的特效代碼，值得大家學(xué)習(xí)。
運(yùn)行效果圖： -------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的jquery實(shí)現(xiàn)多條件篩選特效代碼如下
<!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庫(kù)版本不能過(guò)高否則tab會(huì)失效-->
<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,//彈出時(shí)間?？康淖筮呂恢?
Top : -16,//彈出時(shí)間?？康捻敳窟呂恢?
fuhao : "-",//日期連接符默認(rèn)為-
isTime : false,//是否開(kāi)啟時(shí)間值默認(rèn)為false
beginY : 2010,//年份的開(kāi)始默認(rèn)為1949
endY :2015//年份的結(jié)束默認(rèn)為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">景點(diǎn)</li>
<li>交通樞紐</li>
<li>地鐵周邊</li>
<li>行政區(qū)</li>
</ul>
<div class="ui-tab-bd">
<div class="ui-tab-content clearfix">
<ul class="clearfix ui-tab-list2">
<li class="ui-tab-active">景點(diǎn)</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="" />
淘金/環(huán)市東 </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="" />
淘金/環(huán)市東 </label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
廣州東站/天河北</label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
北京路/海珠廣場(chǎng)</label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
珠江新城/跑馬場(chǎng) </label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
長(zhǎng)隆景區(qū)/廣州南站</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="" />
淘金/環(huán)市東 </label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
廣州東站/天河北</label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
北京路/海珠廣場(chǎng)</label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
珠江新城/跑馬場(chǎng) </label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
長(zhǎng)隆景區(qū)/廣州南站</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="" />
淘金/環(huán)市東 </p>
<p>
<input name="tabrad1" type="radio" value="" />
廣州東站/天河北</p>
<p>
<input name="tabrad1" type="radio" value="" />
北京路/海珠廣場(chǎng)</p>
<p>
<input name="tabrad1" type="radio" value="" />
珠江新城/跑馬場(chǎng) </p>
<p>
<input name="tabrad1" type="radio" value="" />
長(zhǎng)隆景區(qū)/廣州南站</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="價(jià)格范圍">
<dt>酒店價(jià)格</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>酒店星級(jí)</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="百度易平臺(tái)">三星/舒適</a></label>
</dd>
</dl>
<dl class="listIndex" attr="terminal_brand_s">
<dt>主題風(fēng)格</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'>主題風(fēng)格</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實(shí)現(xiàn)多條件篩選特效代碼，希望大家可以喜歡。
您可能感興趣的文章:
- JQuery篩選器全系列介紹
- jQuery篩選器children()案例詳解(圖文)
- jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象
- jQuery多條件篩選如何實(shí)現(xiàn)
- jQuery選擇器之屬性篩選選擇器用法詳解
- 基于jQuery實(shí)現(xiàn)表格內(nèi)容的篩選功能
- 基于JQuery的一句代碼實(shí)現(xiàn)表格的簡(jiǎn)單篩選
- JS Jquery 遍歷,篩選頁(yè)面元素 自動(dòng)完成(實(shí)現(xiàn)代碼)
- jquery表格內(nèi)容篩選實(shí)現(xiàn)思路及代碼
- jquery數(shù)組過(guò)濾篩選方法grep()簡(jiǎn)介
- jQuery 篩選器簡(jiǎn)單操作示例
相關(guān)文章
節(jié)點(diǎn)的刪除在應(yīng)用中比較常見(jiàn)，如何動(dòng)態(tài)刪除某一節(jié)點(diǎn)來(lái)實(shí)現(xiàn)某一特殊效果，下面有個(gè)不錯(cuò)的示例，希望對(duì)大家有所幫助2014-01-01
jquery實(shí)現(xiàn)div陰影效果示例代碼
div陰影效果在以前都是采用圖片來(lái)實(shí)現(xiàn)的，而在本文大家將學(xué)會(huì)使用jquery來(lái)實(shí)現(xiàn)，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了jQuery中delegate()方法用法,實(shí)例分析了delegate()方法的功能、定義及為匹配元素的子元素添加一個(gè)或多個(gè)事件,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行函數(shù)的使用技巧,需要的朋友可以參考下2015-01-01
jQuery EasyUI API 中文文檔 - ComboGrid 組合表格
jQuery EasyUI API 中文文檔 - ComboGrid 組合表格,需要的朋友可以參考下。2011-10-10
easyui messager alert 三秒后自動(dòng)關(guān)閉提示的實(shí)例
下面小編就為大家?guī)?lái)一篇easyui messager alert 三秒后自動(dòng)關(guān)閉提示的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
解決jquery validate 驗(yàn)證不通過(guò)后驗(yàn)證正確的信息仍殘留在label上的方法
在本篇文章里小編給大家整理了關(guān)于解決jquery validate 驗(yàn)證不通過(guò)后驗(yàn)證正確的信息仍殘留在label上的方法，有需要的朋友們可以學(xué)習(xí)下。2019-08-08
Jquery加載時(shí)從后臺(tái)讀取數(shù)據(jù)綁定到dropdownList實(shí)例
從后臺(tái)讀取數(shù)據(jù)綁定到dropdownList，option選項(xiàng)value動(dòng)態(tài)賦值，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-06-06
jquery中快速取值的方法有很多，在本文為大家介紹下通過(guò)name實(shí)現(xiàn)快速取值，感興趣的朋友可以參考下2014-01-01
制作高質(zhì)量的JQuery Plugin 插件的方法
最近jquery非常流行，想個(gè)性化定制一些功能，就可以將代碼寫(xiě)成插件的形式，方便使用與修改。2010-04-04
這篇文章主要介紹了基于jQuery下拉選擇框插件支持單選多選功能代碼的相關(guān)資料,需要的朋友可以參考下2016-06-06