首页 > 特效插件 > 表单按钮 >  JQ多条件过滤,多条件筛选jQuery插件正文

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

特效介绍
JQ多条件过滤,多条件筛选jQuery插件
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>