效果展示:
未选中
被选中
实现代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>jQuery实现多条件筛选</title> <meta name="keywords" content="jquery,筛选" /> <meta name="description" content="Helloweba文章结合实例演示HTML5、CSS3、jquery、PHP等WEB技术应用。" /> <link rel="stylesheet" type="text/css" href="../css/main.css" /> <script type="text/javascript" src="js/jquery.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <!-- <script type="text/javascript" src="js/script.js"></script> --> </head> <body> <div id="main"> <div class="demo"> <ul class="select"> <li class="select-list"> <dl id="select1"> <dt>上装:</dt> <dd class="select-all selected"><a href="#">全部</a></dd> <dd><a href="#">针织衫</a></dd> <dd><a href="#">毛呢外套</a></dd> <dd><a href="#">T恤</a></dd> <dd><a href="#">羽绒服</a></dd> <dd><a href="#">棉衣</a></dd> <dd><a href="#">卫衣</a></dd> <dd><a href="#">风衣</a></dd> </dl> </li> <li class="select-list"> <dl id="select2"> <dt>裤装:</dt> <dd class="select-all selected"><a href="#">全部</a></dd> <dd><a href="#">牛仔裤</a></dd> <dd><a href="#">小脚/铅笔裤</a></dd> <dd><a href="#">休闲裤</a></dd> <dd><a href="#">打底裤</a></dd> <dd><a href="#">哈伦裤</a></dd> </dl> </li> <li class="select-list"> <dl id="select3"> <dt>裙装:</dt> <dd class="select-all selected"><a href="#">全部</a></dd> <dd><a href="#">连衣裙</a></dd> <dd><a href="#">半身裙</a></dd> <dd><a href="#">长袖连衣裙</a></dd> <dd><a href="#">中长款连衣裙</a></dd> </dl> </li> <li class="select-result"> <dl> <dt>已选条件:</dt> <dd class="select-no">暂时没有选择过滤条件</dd> </dl> </li> </ul> </div> <div class="contents"></div> <div class="pagination"></div> </div> </body> <script> var s1=''; var s2=''; var s3=''; $(function(){ $("#select1 dd").click(function () { $(this).addClass("selected").siblings().removeClass("selected"); if ($(this).hasClass("select-all")) { $("#selectA").remove(); s1=''; } else { var copyThisA = $(this).clone(); if ($("#selectA").length > 0) { $("#selectA a").html($(this).text()); } else { $(".select-result dl").append(copyThisA.attr("id", "selectA")); } s1=$(this).text(); } get_list(1); }); $("#select2 dd").click(function () { $(this).addClass("selected").siblings().removeClass("selected"); if ($(this).hasClass("select-all")) { $("#selectB").remove(); s2=''; } else { var copyThisB = $(this).clone(); if ($("#selectB").length > 0) { $("#selectB a").html($(this).text()); } else { $(".select-result dl").append(copyThisB.attr("id", "selectB")); } s2=$(this).text(); } get_list(1); }); $("#select3 dd").click(function () { $(this).addClass("selected").siblings().removeClass("selected"); if ($(this).hasClass("select-all")) { $("#selectC").remove(); s3=''; } else { var copyThisC = $(this).clone(); if ($("#selectC").length > 0) { $("#selectC a").html($(this).text()); } else { $(".select-result dl").append(copyThisC.attr("id", "selectC")); } s3=$(this).text(); } get_list(1); }); $("#selectA").live("click", function () { $(this).remove(); $("#select1 .select-all").addClass("selected").siblings().removeClass("selected"); s1=''; get_list(1); }); $("#selectB").live("click", function () { $(this).remove(); $("#select2 .select-all").addClass("selected").siblings().removeClass("selected"); s2=''; get_list(1); }); $("#selectC").live("click", function () { $(this).remove(); $("#select3 .select-all").addClass("selected").siblings().removeClass("selected"); s3=''; get_list(1); }); $(".select dd").live("click", function () { if ($(".select-result dd").length > 1) { $(".select-no").hide(); } else { $(".select-no").show(); } }); }); var get_list=function (p){ $('.contents').html('<img src="load.gif" id="loading">'); $.post('list.php',{a:s1,b:s2,c:s3,page:p},function (list){ $("#loading").remove(); console.log(list); var list_str=''; $.each(list.list,function (i,v){ list_str+='<li><a href="">'+v.title+"</li>"; }); $('.contents').html("<ul>"+list_str+"</ul>"); pagetotal=Math.ceil(list.total/list.pagesize); var pagination=''; for(var i=1;i<=pagetotal;i++){ pagination+='<a οnclick="get_list('+i+')" href="javascript:void(0)">'+i+'</a> '; } $(".pagination").html(pagination); },'json',true); } </script> </html>
php处理页面<?php $page=isset($_POST['page'])?intval($_POST['page']):1; // print_r($_POST);exit; $a=$_POST['a']; $b=$_POST['b']; $c=$_POST['c']; $pagesize='10'; // print_r($_POST);exit; $sql="select title,id from article where title like '%%' AND description like '%%' AND contents like '%%'"; $total='200'; if($page==1){ $list=[['title'=>'标题','id'=>1],['title'=>'标题','id'=>2],['title'=>'标题','id'=>3],['title'=>'标题','id'=>4],['title'=>'标题','id'=>5],['title'=>'标题','id'=>6],['title'=>'标题','id'=>7],['title'=>'标题','id'=>9],['title'=>'标题','id'=>8]]; }elseif($page=2){ $list=[['title'=>'标题3','id'=>1],['title'=>'标题333','id'=>2],['title'=>'标题222','id'=>3],['title'=>'标题','id'=>4],['title'=>'标题333','id'=>5],['title'=>'标题','id'=>6],['title'=>'标题','id'=>7],['title'=>'标题','id'=>9],['title'=>'标题','id'=>8]]; }elseif($page=3){ $list=[['title'=>'标题33333','id'=>1],['title'=>'标题333555','id'=>2],['title'=>'标题222','id'=>3],['title'=>'标题55555','id'=>4],['title'=>'标题333','id'=>5],['title'=>'标题','id'=>6],['title'=>'标题','id'=>7],['title'=>'标题','id'=>9],['title'=>'标题','id'=>8]]; } $data=['page'=>$page,'a'=>$a,'b'=>$b,'c'=>$c,'pagesize'=>$pagesize,'list'=>$list,'total'=>$total]; exit(json_encode($data));