首页 » 前端开发 » 正文

利用jquery实现多条件筛选

qq%e5%9b%be%e7%89%8720161108102920

首先是前端的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数据给前端。

博主的文章或程序如果给您带来了价值,感谢您打赏一二
微信扫码支付 支付宝扫码支付

本文共 2 个回复

  • JerichoPH 2016/11/16 16:46

    请问大神,你这个必须满足三个规格吗?如果是2个或者4个这种不确定的怎么办?

    • bxhcsz 博主 2016/11/17 09:48

      @ JerichoPH 我还没有遇到过不确定几个规格的,一般都是确定的,你比如有2个,就删掉一部分,包括html、js部分,4个就在源码基础上增加。

发表评论