我們?cè)陂_發(fā)深圳網(wǎng)站建設(shè)中，常常會(huì)有很多需要用到產(chǎn)品篩選，下面小編來分享下如何利用jquery實(shí)現(xiàn)多條件篩選，如下圖↓

一、首先是前端的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="#">藍(lán)色</a></dd>

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

    </dl>

  </li>

  <li class="select-list">

    <dl id="select3">

      <dt>型號(hào)：</dt>

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

      <dd><a href="#">型號(hào)一</a></dd>

      <dd><a href="#">型號(hào)二</a></dd>

      <dd><a href="#">型號(hào)三</a></dd>

      <dd><a href="#">型號(hào)四</a></dd>

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

    </dl>

  </li>

  <li class="select-result">

    <dl>

      <dt>當(dāng)前篩選條件：</dt>

      <dd class="select-no">暫時(shí)未選擇篩選條件</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();//調(diào)用ajax函數(shù)獲取json數(shù)據(jù)

});

//條件二

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

}

});

});

//異步獲取到后端傳回的數(shù)據(jù)

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數(shù)據(jù)后，進(jìn)行數(shù)據(jù)展現(xiàn)等前端業(yè)務(wù)邏輯

        }, error: function(data) {  

        }  

    });  

} 

多條件使用hidden域來儲(chǔ)存，ajax異步提交到后端地址，然后由后端返回篩選后的json數(shù)據(jù)給前端。

好了，此方法使用很便捷，各位可以嘗試試試，如有需要深圳網(wǎng)站建設(shè)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)等需求可聯(lián)系我們，謝謝。

文章引用：http://www.lt-ad.com/new/191.html

本站文章為深圳網(wǎng)站建設(shè)·源美網(wǎng)絡(luò)原創(chuàng)策劃，如有版權(quán)糾紛或者違規(guī)問題，請(qǐng)聯(lián)系我們刪除，謝謝！