利用jQuery实现多条件分类筛选查询代码

利用jQuery实现多条件分类筛选查询代码
特效描述:利用jQuery实现 多条件 分类筛选 查询代码,利用jQuery实现多条件分类筛选查询代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap/css/font-awesome.css" />
<link rel="stylesheet" href="css/commonSearch.css" />

2. 引入JS

<script type="text/javascript" src="bootstrap/js/jquery.js" ></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/commonSearch.js" ></script>

3. HTML代码

<div id="search"></div>
<script>
	$(function(){
		var commonSearchData = {
			url : "",//查询url
			title : "您已选择",
			dataList : [{
				id: "demo1",
				title: "电脑整机",
				selectorList: [{
					id: "selector1",
					name: "笔记本"
				},
				{
					id: "selector2",
					name: "台式机"
				},{
					id: "selector3",
					name: "游戏本"
				},{
					id: "selector4",
					name: "一体机"
				},{
					id: "selector5",
					name: "平台电脑"
				},{
					id: "selector6",
					name: "服务器/工作站"
				}],
				multipleSelect: false,
				more: true
			},{
				id: "demo2",
				title: "电脑配件",
				selectorList: [{
					id: "selector21",
					name: "组装电脑"
				},
				{
					id: "selector22",
					name: "显示器"
				},{
					id: "selector23",
					name: "CPU"
				},{
					id: "selector24",
					name: "主板"
				},{
					id: "selector25",
					name: "显卡"
				},{
					id: "selector26",
					name: "机箱"
				}],
				multipleSelect: true,
				more: true
			},
			{
				id: "demo3",
				title: "分类",
				selectorList: [{
					id: "selector31",
					name: "游戏本"
				},
				{
					id: "selector32",
					name: "轻薄本"
				},{
					id: "selector33",
					name: "二合一笔记本"
				},{
					id: "selector34",
					name: "常规笔记本"
				},{
					id: "selector35",
					name: "加固笔记本"
				},{
					id: "selector36",
					name: "其他"
				}],
				multipleSelect: false,
				more: false
			}],
			total:0
		};
		$("#search").commonSearch(commonSearchData,function(param){
			//TODO 查询回调函数
		});
	})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到