지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

jquery는 다중 조건 필터링 특수 효과 코드를 구현합니다.

WBOY
풀어 주다： 2016-05-16 15:41:59
원래의
1347명이 탐색했습니다.

이 기사의 예에서는 jquery를 사용한 다중 조건 필터링 효과 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
jquery로 구현된 날짜 선택 양식 효과 소스 코드가 포함된 다중 조건 검색 양식은 필터링 및 검색을 위한 다중 조건을 구현하는 특수 효과 코드입니다. 다중 조건에는 동시에 시간, 위치, 호텔 위치 및 호텔 이름과 같은 옵션이 있습니다. time, 시간 입력 형식에 시간 선택 기능이 있어 학습해볼만한 매우 실용적인 특수효과 코드입니다.
运行效果图：                       ------查看效果 下载源码------------ --------

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
모두에게 공유되는 다중 조건 필터링 특수 효과 코드의 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多条件筛选特效 jquery条件筛选 jquery多重条件筛选 jquery筛选
원천：php.cn
이전 기사：Node.js는 메뉴와 같은 TAB 탭 효과 code_javascript 기술을 구현합니다. 다음 기사：위, 아래, 왼쪽, 오른쪽으로 달리는 js 게임 캐릭터 효과 코드 공유_자바스크립트 기술
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1997
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2159
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1824
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1718
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1737
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿