PHP 分類篩選 （實現購物、視訊等網站的列表篩選功能）
阿新 • • 發佈：2019-01-09
比如購物網站、視訊網站等，列表頁一般都有篩選功能。思路如下，僅供借鑑：
<?php // Debug: 輸出提交的資料 var_dump($_GET); // 要進行篩選的欄位 $fields = array('price','color','metal'); // 把上一次已篩選的值儲存在Form的隱藏域中 foreach($fields as $f){ if(isset($_GET[$f])){ $fitervalue[$f] = $_GET[$f]; } } ?> <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>分類篩選</title> <style type="text/css"> body{font-size:12px;font-family:"宋體";} #form{line-height:24px;} #form a{text-decoration:none;color:#333;border:1px solid #fff;padding:4px 6px;outline:none;} #form a:hover{background:#FFFF68;border:1px solid #FF9D6F;} #form .current{background:#FFFF68;} </style> <script type="text/javascript"> function Filter(field,value){ var $ = function(ele){return document.getElementById(ele);} var ipts = $('filterForm').getElementsByTagName('input'),result=[]; for(var i=0,l=ipts.length;i<l;i++){ if(ipts[i].getAttribute('to')=='filter'){ result.push(ipts[i]); } } if($(field)){ value = value || ''; $(field).value = value; for(var j=0,len=result.length;j<len;j++){ if(result[j].value==''){ result[j].parentNode.removeChild(result[j]); } } document.forms['filterForm'].submit(); } return false; } </script> </head> <body> <div id='form'> <!-----這裡是關鍵: 要把上一次篩選的值儲存起來-----> <form id="filterForm" action="cond.php" method="get"> <input to="filter" type="hidden" id="price" name="price" value="<?php echo $fitervalue['price']; ?>" /> <input to="filter" type="hidden" id="color" name="color" value="<?php echo $fitervalue['color']; ?>" /> <input to="filter" type="hidden" id="metal" name="metal" value="<?php echo $fitervalue['metal']; ?>" /> </form> 價格： <a href="javascript:Filter('price');" class="<?php if(!$_GET['price']){echo 'current';} ?>">全部</a> <a href="javascript:Filter('price','100-999');" class="<?php if($_GET['price']=='100-999'){echo 'current';} ?>">100-999</a> <a href="javascript:Filter('price','1000-1999');" class="<?php if($_GET['price']=='1000-1999'){echo 'current';} ?>">1000-1999</a> <a href="javascript:Filter('price','2000-2999');" class="<?php if($_GET['price']=='2000-2999'){echo 'current';} ?>">2000-2999</a> <br/> 顏色： <a href="javascript:Filter('color');" class="<?php if(!$_GET['color']){echo 'current';} ?>">全部</a> <a href="javascript:Filter('color','紅色');" class="<?php if($_GET['color']=='紅色'){echo 'current';} ?>">紅色</a> <a href="javascript:Filter('color','藍色');" class="<?php if($_GET['color']=='藍色'){echo 'current';} ?>">藍色</a> <br /> 材質： <a href="javascript:Filter('metal')" class="<?php if(!$_GET['metal']){echo 'current';} ?>">全部</a> <a href="javascript:Filter('metal','純金');" class="<?php if($_GET['metal']=='純金'){echo 'current';} ?>">純金</a> <a href="javascript:Filter('metal','純銀');" class="<?php if($_GET['metal']=='純銀'){echo 'current';} ?>">純銀</a> <br /> </div> </body> </html>
