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 相关文章推荐
改版了网上的一个js操作userdata
Apr 27 Javascript
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
JS控制输入框内字符串长度
May 21 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 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中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
vuex的使用步骤
2021/01/06 Vue.js
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python timeit模块的使用实践
2020/01/13 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
python实现银行账户系统
2021/02/22 Python
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
模范教师事迹材料
2014/02/10 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
追悼会家属答谢词
2015/09/29 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
Python音乐爬虫完美绕过反爬
2021/08/30 Python
MySQL如何使备份得数据保持一致
2022/05/02 MySQL