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修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
javascript实现点击星星小游戏
Dec 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
ThinkPHP写第一个模块应用
2012/02/20 PHP
php-fpm配置详解
2014/02/12 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
跟老齐学Python之变量和参数
2014/10/10 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
机械工程师的岗位职责
2013/11/17 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
培根随笔读书笔记
2015/07/01 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android