JQ多条件过滤，多条件筛选jQuery插件

JQ多条件过滤，多条件筛选jQuery插件，点击高亮选项，并且在已选条件下显示该选项，点击已选条件中的选项，自动取消当前选项。当然，这只是jQuery的插件，并没有实现数据的交流，需要您传值，进行数据库的条件取值。

1、在head引入下面的js和css文件：

<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

2、在body引入下面的代码：

<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="#">T恤</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>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！