我们在开发深圳网站建设中,常常会有很多需要用到产品筛选,下面小编来分享下如何利用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数据给前端。
好了,此方法使用很便捷,各位可以尝试试试,如有需要深圳网站建设,网站制作,网站设计等需求可联系我们,谢谢。
上一篇: JS发送手机验证码倒计时特效
下一篇: 关于php识别二维码
售后保障
承诺任何问题1小时内解决数据备份
更安全、更高效、更稳定价格公道精准
项目经理精准报价不弄虚作假合作无风险
重合同讲信誉,无效全额退款