-
极资源官方
- 热度7515℃
比如购物网站、视频网站等，列表页一般都有筛选功能，思路如下，仅供借鉴
以淘宝等购物商城为例
进行价格、颜色、尺码的筛选：
<?php
/* Debug: 输出提交的数据 */
var_dump($_GET);
/* 要进行筛选的字段 */
$fields = array('price','color','size');
/* 把上一次已筛选的值保存在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="aaa.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 if(!empty($fitervalue['color'])){ echo $fitervalue['color'];} ?>" />
<input to="filter" type="hidden" id="size" name="size" value="<?php if(!empty($fitervalue['size'])){ echo $fitervalue['size'];} ?>" />
</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('size')" class="<?php if(!$_GET['size']){echo 'current';} ?>">全部</a>
<a href="javascript:Filter('size','XS');" class="<?php if($_GET['size']=='XS'){echo 'current';} ?>">XS</a>
<a href="javascript:Filter('size','S');" class="<?php if($_GET['size']=='S'){echo 'current';} ?>">S</a>
<a href="javascript:Filter('size','M');" class="<?php if($_GET['size']=='M'){echo 'current';} ?>">M</a>
<br />
</div>
</body>
</html>
友情提示：垃圾评论一律封号...