php结合js实现多条件组合查询

2019-11-19 11:27:07

字体：大中小

来源：转载

供稿：网友

一、效果图

二、前端代码

<!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

<?phppublic 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();}?>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：利用原生JS实现data方法示例代码

下一篇：vue实现前台列表数据过滤搜索、分页效果