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下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 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
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
php错误级别的设置方法
2013/06/17 PHP
php常用正则函数实例小结
2016/12/29 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python pip使用超时问题解决方案
2020/08/03 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
华三通信H3C面试题
2015/05/15 面试题
对孩子的寄语
2014/04/09 职场文书
应聘教师自荐书
2014/06/16 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
思想政治表现评语
2015/01/04 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
详解nodejs内置模块
2021/05/06 NodeJs
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
Python如何识别银行卡卡号?
2021/06/10 Python