我們在開發深圳網站(zhàn)建設中，常常會有很多需要用到産品篩選，下面小編來(lái)分(fēn)享下如(rú)何利用jquery實現多條件(jiàn)篩選，如(rú)下圖↓

一、首先是前端的html布局部分(fēn)：

<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="#">紅(hóng)色</a></dd>

      <dd><a href="#">白(bái)色</a></dd>

      <dd><a href="#">黃(huáng)色</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>當前篩選條件(jiàn)：</dt>

      <dd class="select-no">暫時未選擇篩選條件(jiàn)</dd>

    </dl>

  </li>

</ul>

二、然後是js部分(fēn)：

$(document).ready(function(){

//條件(jiàn)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數據

});

//條件(jiàn)二

$("#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();

});

//條件(jiàn)三

$("#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: "error404.html",  

        success: function(data) {  

console.log(data);

//獲取後端的返回json數據後，進行數據展現等前端業務邏輯

        }, error: function(data) {  

        }  

    });  

} 

多條件(jiàn)使用hidden域來(lái)儲存，ajax異步提交到後端地址，然後由後端返回篩選後的json數據給前端。

好了，此方法使用很便捷，各位可(kě)以嘗試試試，如(rú)有需要深圳網站(zhàn)建設，網站(zhàn)制作(zuò)，網站(zhàn)設計(jì)等需求可(kě)聯系我們，謝謝。

文章(zhāng)引用：

本站(zhàn)文章(zhāng)爲深圳網站(zhàn)建設·源美網絡原創策劃，如(rú)有版權糾紛或者違規問(wèn)題，請(qǐng)聯系我們删除，謝謝！