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 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
js中的闭包实例展示
Nov 01 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
Node.js 中判断一个文件是否存在
Aug 24 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
再次研究下cache_lite
2007/02/14 PHP
php删除数组元素示例分享
2014/02/17 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php的扩展写法总结
2019/05/14 PHP
强制设为首页代码
2006/06/19 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
django用户登录验证的完整示例代码
2019/07/21 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
Python安装Bs4的多种方法
2020/11/28 Python
美国在线宠物商店:Chewy
2019/01/12 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
药剂专业学生求职信范文
2013/12/28 职场文书
精彩的英文自荐信
2014/01/30 职场文书
校运会入场式解说词
2014/02/10 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
党员干部承诺书
2014/03/25 职场文书
车辆年审委托书范本
2014/09/18 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
神秘岛读书笔记
2015/07/01 职场文书