php结合js实现多条件组合查询


Posted in Javascript onMay 28, 2019

 本文实例为大家分享了php结合js实现多条件组合查询的具体代码,供大家参考,具体内容如下

一、效果图

php结合js实现多条件组合查询

二、前端代码

<!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();
}
?>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript JSON操作入门实例
Apr 16 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 #Javascript
js 将线性数据转为树形的示例代码
May 28 #Javascript
React中使用外部样式的3种方式(小结)
May 28 #Javascript
vue实现多条件和模糊搜索功能
May 28 #Javascript
vue实现路由切换改变title功能
May 28 #Javascript
Vue 无限滚动加载指令实现方法
May 28 #Javascript
vue实现搜索过滤效果
May 28 #Javascript
You might like
加强版phplib的DB类
2008/03/31 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
javascript Excel操作知识点
2009/04/24 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
python递归法解决棋盘分割问题
2019/07/17 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
Django如何实现防止XSS攻击
2020/10/13 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
募捐倡议书怎么写
2014/05/14 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
学校德育工作总结2015
2015/05/11 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
用Python将库打包发布到pypi
2021/04/13 Python