多条件组合查询

最新推荐文章于 2025-06-08 18:04:11 发布

原创最新推荐文章于 2025-06-08 18:04:11 发布 · 3.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#多条件 #组合查询

jQuery 专栏收录该内容

22 篇文章

订阅专栏

本文通过展示前后端代码，详细讲解如何实现多条件的组合查询功能。从效果图中可以看到，用户可以自由选择多个条件进行商品搜索。前端部分利用HTML和JavaScript处理用户输入，将筛选条件发送到服务端。在服务端，goodsController.class.php处理请求，根据接收到的参数执行相应的SQL查询，返回匹配的商品数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果图

在这里插入图片描述

二、前端代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Jquery分类</title> 
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css"> 
	.templinkactive { 
		padding:5px; 
		text-decoration:none; 
		color:red; 
		} 
	.templink { 
		cursor:pointer; 
		padding:5px; 
		text-decoration:none; 
	} 
	table{border:1px solid #ccc;}
	table tr{ height:35px;} 
</style>
<script type="text/javascript"> 
	$(function () { 
		//品牌 
		var alink01 = $("#linktype01").find("span"); 
		alink01.click(function () { 
			alink01.each(function () { 
				$(this).removeClass("templinkactive").addClass("templink"); 
			}); 
			$(this).removeClass("templink").addClass("templinkactive"); 
			$("#Brand").val($(this).attr("tag"));
			SetPara();
		});

		//价格 
		var alink02 = $("#linktype02").find("span"); 
		alink02.click(function () { 
			alink02.each(function () { 
				$(this).removeClass("templinkactive").addClass("templink"); 
			}); 
			$(this).removeClass("templink").addClass("templinkactive"); 
			$("#Price").val($(this).attr("tag"));
			SetPara();
		}) 

		//尺寸 
		var alink03 = $("#linktype03").find("span"); 
		alink03.click(function () { 
			alink03.each(function () { 
				$(this).removeClass("templinkactive").addClass("templink"); 
			}); 
			$(this).removeClass("templink").addClass("templinkactive"); 
			$("#Size").val($(this).attr("tag")); 
			SetPara(); 
		}); 
	}); 

	function SetPara() { 
		var Brand = $("#Brand").val(); 
		var Price = $("#Price").val(); 
		var Size = $("#Size").val(); 
		alert("1.php?Brand=" + Brand + "&Price=" + Price + "&Size=" + Size); 
		// var keywords = $("#search").val();
	    // var skip_url =   "http://" + window.location.hostname + window.location.pathname;
	    // var url = skip_url + "?s=/admin/goods/goods_list/Brand/"+Brand+"/Price/"+Price+"/Size/"+Size;
	    // window.location.href = url;
	    // alert(url); 
	}; 
</script>
<script type="text/javascript">
	/*//TP框架-start
	$(function(){
        var Brand = $("#Brand").val();
        var Price = $("#Price").val();
        var Size = $("#Size").val();
        // alert(tag);
        if(Brand != ''){
            $("#linktype01").find("span").removeClass("templinkactive").addClass("templink")
            $('span[tag="'+Brand+'"]').css('color','red');
        }
        if(Price != ''){
            $("#linktype02").find("span").removeClass("templinkactive").addClass("templink")
            $('span[tag="'+Price+'"]').css('color','red');
        }
        if(Size != ''){
            $("#linktype03").find("span").removeClass("templinkactive").addClass("templink")
            $('span[tag="'+Size+'"]').css('color','red');
        }
    });
    //TP框架-end*/
</script>
</head> 
<body> 
	<form id="form1" runat="server"> 
		<div> 
			<table> 
				<tr id="linktype01"> 
					<td style="width:100px"> 
						<b>笔记本品牌</b> 
					</td> 
					<td> 
						<span class='templinkactive' tag="0">不限</span> 
					</td> 
					<td> 
						<span class='templink' tag="100101">联想（Lenovo）</span> 
					</td> 
					<td> 
						<span class='templink' tag="100102">宏碁（Acer）</span> 
					</td> 
					<td> 
						<span class='templink' tag="100103">华硕（ASUS）</span> 
					</td> 
					<td> 
						<span class='templink' tag="100104">戴尔（DELL）</span> 
					</td> 
					<td> 
						<span class='templink' tag="100105">苹果（Apple）</span> 
					</td> 
					<td> 
						<span class='templink' tag="100106">三星 （SAMSUNG）</span> 
					</td> 
				</tr> 
				<tr id="linktype02"> 
					<td style="width:100px"> 
						<b>价格范围</b> 
					</td> 
					<td> 
						<span class='templinkactive' tag="0">不限</span> 
					</td> 
					<td> 
						<span class='templink' tag="100201">1000-2999</span> 
					</td> 
					<td> 
						<span class='templink' tag="100202">3000-3499</span> 
					</td> 
					<td> 
						<span class='templink' tag="100203">4000-4499</span> 
					</td> 
					<td>
						<span class='templink' tag="100204">5000-5999</span>
					</td>
					<td>
						<span class='templink' tag="100205">6000-6999</span>
					</td>
					<td>
						<span class='templink' tag="100206">7000及以上</span>
					</td>
				</tr>
				<tr id="linktype03">
					<td style="width:100px">
						<b>尺寸范围</b>
					</td>
					<td>
						<span class='templinkactive' tag="0" >不限</span>
					</td>
					<td>
						<span class='templink' tag="100301">8.9英寸及以下</span>
					</td>
					<td>
						<span class='templink' tag="100302">11英寸</span>
					</td>
					<td>
						<span class='templink' tag="100303">12英寸</span>
					</td>
					<td>
						<span class='templink' tag="100304">13英寸</span>
					</td>
					<td>
						<span class='templink' tag="100305">14英寸</span>
					</td>
					<td>
						<span class='templink' tag="100306">15英寸及以上</span>
						<input type="hidden" id="Brand" value="" />
						<input type="hidden" id="Price" value="" />
						<input type="hidden" id="Size" value="" />
					</td> 
				</tr> 
			</table> 
		</div> 
	</form> 
</body> 
</html>

三、服务端代码

goodsController.class.php

<?php
public function goods_list(){
	$Brand= I('Brand');
	$Price= I('Price');
	$Size= I('Size');
	$this->assign('Brand',$Brand);
	$this->assign('Price',$Price);
	$this->assign('Size',$Size);
	$this->display();
}
?>