jquery实现多条件筛选

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery多条件筛选</title>
</head>
<body>
	<div id="wrap">
		<ul class="select">
			<li class="select-list">
				<dl id="select1">
					<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>
					<dd><a href="#">风衣</a></dd>
					<dd><a href="#">卫衣</a></dd>
				</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>
					<dd><a href="#">铅笔裤</a></dd>
				</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>
				</dl>
			</li>
			<li class="select-result">
				<dl>
					<dt>已选条件:</dt>
					<dd class="select-no">暂时没有选择过滤条件</dd>
				</dl>
			</li>
		</ul>
	</div>
</body>
</html>

css代码：

*{margin:0;padding:0;list-style: none;}
body{font-size:12px;}
.select{width:50%;border:1px solid #ddd;margin:30px auto;border-radius:5px;padding:5px 10px;}
.select li{padding:10px 0 5px 100px}
.select .select-list{border-bottom:1px dashed #eee;}
.select dl{position:relative;line-height:24px;}
.select dl:after{content:" ";display:block;clear:both;height:0;overflow:hidden}
.select dt{width:100px;margin-bottom:5px;position:absolute;top:0;left:-100px;text-align:right;color:#666;height:24px;line-height:24px}
.select dd{float:left;display:inline;margin:0 0 5px 5px;}
.select a{display:inline-block;white-space:nowrap;height:24px;padding:0 10px;text-decoration:none;color:#039;border-radius:2px;}
.select a:hover{color:#f60;background-color:#f3edc2;}
.select .selected a{color:#fff;background-color:#f60;}
.select-result dt{font-weight:bold;}
.select-no{color:#999;}
.select .select-result a{padding-right:20px;background:#f60 url("close.gif") right 9px no-repeat;}
.select .select-result a:hover{background-position:right -15px;}

js代码:

$("#select1 dd").click(function(){
		$(this).addClass("selected").siblings().removeClass("selected");
		if($(this).hasClass("select-all")){
			$("#selectA").remove();
		}else{	
			var copyA = $(this).clone();
			if($("#selectA").length > 0){
				$("#selectA a").html($(this).text());
			}else{
				$(".select-result dl").append(copyA.attr("id","selectA"));
			}
		}
	})
	$("#select2 dd").click(function(){
		$(this).addClass("selected").siblings().removeClass("selected");
		if($(this).hasClass("select-all")){
			$("#selectB").remove();
		}else{	
			var copyB = $(this).clone();
			if($("#selectB").length > 0){
				$("#selectB a").html($(this).text());
			}else{
				$(".select-result dl").append(copyB.attr("id","selectB"));
			}
		}
	})
	$("#select3 dd").click(function(){
		$(this).addClass("selected").siblings().removeClass("selected");
		if($(this).hasClass("select-all")){
			$("#selectC").remove();
		}else{	
			var copyC = $(this).clone();
			if($("#selectC").length > 0){
				$("#selectC a").html($(this).text());
			}else{
				$(".select-result dl").append(copyC.attr("id","selectC"));
			}
		}
	})
	$("#selectA").live("click",function(){
		$(this).remove();
		$("#select1 .select-all").addClass("selected").siblings().removeClass("selected");
	})
	$("#selectB").live("click",function(){
		$(this).remove();
		$("#select2 .select-all").addClass("selected").siblings().removeClass("selected");
	})
	$("#selectC").live("click",function(){
		$(this).remove();
		$("#select3 .select-all").addClass("selected").siblings().removeClass("selected");
	})
	$(".select dd").live("click", function () {
		if ($(".select-result dd").length > 1) {
			$(".select-no").hide();
		} else {
			$(".select-no").show();
		}
	});

效果展示：

close.gif:

注意：

live():jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

但是要注意live的使用版本，live方法在1.7中已经不建议使用，在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。

on方法可以接受三个参数：事件名、触发选择器、事件函数。

需要特别注意的是：on方法中间的这个触发选择器就是你将要添加的HTML元素的类名、id或者元素名，使用它就可以实现live的效果。

jquery实现多条件筛选

猜你喜欢