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_08_函数对象
Oct 15 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
Ajax请求超时与网络异常处理图文详解
May 23 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使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
node.js超时timeout详解
2014/11/26 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
JavaScript中原型和原型链详解
2015/02/11 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
python使用xmlrpc实例讲解
2013/12/17 Python
Djang中静态文件配置方法
2015/07/30 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
国庆节标语大全
2014/10/08 职场文书
卖房协议书样本
2014/10/30 职场文书
2014年学前班工作总结
2014/12/08 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS