我们在开发深圳网站建设中，常常会有很多需要用到产品筛选，下面小编来分享下如何利用jquery实现多条件筛选，如下图↓

一、首先是前端的html布局部分：

<ul class="select">

  <li class="select-list">

    <dl id="select1">

      <dt>尺码：</dt>

      <dd class="select-all selected"><a href="#">全部</a></dd>

      <dd><a href="#">M</a></dd>

      <dd><a href="#">L</a></dd>

      <dd><a href="#">S</a></dd>

      <dd><a href="#">XL</a></dd>

      <dd><a href="#">XXL</a></dd>

      <input id="key1" type="text">

    </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>

      <input id="key2" type="text">

    </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>

      <input id="key3" type="text">

    </dl>

  </li>

  <li class="select-result">

    <dl>

      <dt>当前筛选条件：</dt>

      <dd class="select-no">暂时未选择筛选条件</dd>

    </dl>

  </li>

</ul>

二、然后是js部分：

$(document).ready(function(){

//条件1

$("#select1 dd").click(function () {

$(this).addClass("selected").siblings().removeClass("selected");

$("#key1").val($(this).text());//add

if ($(this).hasClass("select-all")) {

$("#selectA").remove();

} else {

var copyThisA = $(this).clone();

if ($("#selectA").length > 0) {

$("#selectA a").html($(this).text());

} else {

$(".select-result dl").append(copyThisA.attr("id", "selectA"));

}

}

get_data();//调用ajax函数获取json数据

});

//条件二

$("#select2 dd").click(function () {

$(this).addClass("selected").siblings().removeClass("selected");

$("#key2").val($(this).text());//add

if ($(this).hasClass("select-all")) {

$("#selectB").remove();

} else {

var copyThisB = $(this).clone();

if ($("#selectB").length > 0) {

$("#selectB a").html($(this).text());

} else {

$(".select-result dl").append(copyThisB.attr("id", "selectB"));

}

}

get_data();

});

//条件三

$("#select3 dd").click(function () {

$(this).addClass("selected").siblings().removeClass("selected");

$("#key3").val($(this).text());//add

if ($(this).hasClass("select-all")) {

$("#selectC").remove();

} else {

var copyThisC = $(this).clone();

if ($("#selectC").length > 0) {

$("#selectC a").html($(this).text());

} else {

$(".select-result dl").append(copyThisC.attr("id", "selectC"));

}

}

get_data();

});

$("#selectA").live("click", function () {

$(this).remove();

$("#select1 .select-all").addClass("selected").siblings().removeClass("selected");

$("#key1").val("");

get_data()

});

$("#selectB").live("click", function () {

$(this).remove();

$("#select2 .select-all").addClass("selected").siblings().removeClass("selected");

$("#key2").val("");

get_data()

});

$("#selectC").live("click", function () {

$(this).remove();

$("#select3 .select-all").addClass("selected").siblings().removeClass("selected");

$("#key3").val("");

get_data()

});

$(".select dd").live("click", function () {

if ($(".select-result dd").length > 1) {

$(".select-no").hide();

} else {

$(".select-no").show();

}

});

});

//异步获取到后端传回的数据

function get_data() {  

var key1=$("#key1").val();

var key2=$("#key2").val();

var key3=$("#key3").val();

var obj=key1+'|'+key2+'|'+key3;

    $.ajax({  

        type: "POST",  

        cache: false,  

        data: "j=" + encodeURI(obj),  

        async: true,  

        url: "api.php",  

        success: function(data) {  

console.log(data);

//获取后端的返回json数据后，进行数据展现等前端业务逻辑

        }, error: function(data) {  

        }  

    });  

} 

多条件使用hidden域来储存，ajax异步提交到后端地址，然后由后端返回筛选后的json数据给前端。

好了，此方法使用很便捷，各位可以尝试试试，如有需要深圳网站建设，网站制作，网站设计等需求可联系我们，谢谢。

文章引用：http://www.szymweb.com/new/191.html

本站文章为深圳网站建设·源美网络原创策划，如有版权纠纷或者违规问题，请联系我们删除，谢谢！