本文實例講述了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>行政區(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">景點</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="" /> 北京路/海珠廣場</label> </p> <p> <label> <input name="tabrad1" type="radio" value="" /> 珠江新城/跑馬場 </label> </p> <p> <label> <input name="tabrad1" type="radio" value="" /> 長隆景區(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="" /> 北京路/海珠廣場</label> </p> <p> <label> <input name="tabrad1" type="radio" value="" /> 珠江新城/跑馬場 </label> </p> <p> <label> <input name="tabrad1" type="radio" value="" /> 長隆景區(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="" /> 北京路/海珠廣場</p> <p> <input name="tabrad1" type="radio" value="" /> 珠江新城/跑馬場 </p> <p> <input name="tabrad1" type="radio" value="" /> 長隆景區(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="價格范圍"> <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實現多條件篩選特效代碼，希望大家可以喜歡。
新聞熱點
疑難解答
