在一些電子商城或購物網(wǎng)站，我們經(jīng)常都能看到多條件組合進(jìn)行篩選產(chǎn)品，實(shí)現(xiàn)的方式有兩種，一種是通過AJAX，另一種是通過Form表單，兩者的區(qū)別在于AJAX是不用刷新頁面就能把搜索結(jié)果直接輸出到頁面上，給用戶的體驗(yàn)也會比較好，但當(dāng)搜索的條件過多時，AJAX的寫法就會相對麻煩很多，所以我要介紹的是相對比較簡單的Form表單的方式。
  大概的效果如下：


 
下面直接貼出代碼，使用時自行根據(jù)條件名稱和條件數(shù)量進(jìn)行修改對應(yīng)參數(shù)就行。



因?yàn)槲疫@里有四個搜索條件，所以我這里會有四個條件的隱藏標(biāo)記用來記錄搜索信息。
以下是條件列表，注意搜索條件的id命名都是不一樣的






我這里是直接點(diǎn)擊選擇后就會直接提交表單了


 
后臺的接收



后臺這里需要把接收的到條件再傳回來，因?yàn)榇蟛糠中Ч际怯眠^前端JS處理的。


 
通過上面這段代碼，就能把之前選中的條件都加上選中效果。
下面直接貼出前端頁面代碼
<form id="ProductForm" name="form1" method="get" action="">
<input id="category_id" type="hidden" value="" name="category_id" to="condition">
<input id="tcategory_id" type="hidden" value="" name="tcategory_id" to="condition">
<input id="wcategory_id" type="hidden" value="" name="wcategory_id" to="condition">
<input id="lcategory_id" type="hidden" value="" name="lcategory_id" to="condition">
<div class="leftbox">
<div class="screen">
<ul>
<li>
<div class="subtit">
Type
<span class="ic"></span>
</div>
<ul id="choose">
<volist name="proList" id="item">
<li>
<a category_id="{$item['category_id']}" href="javascript:Formsubmit('category_id','{$item['category_id']}');">
<span class="spot"></span>{$item['category_name']}
</a>
</li>
</volist>
</ul>
</li>
<li>
<div class="subtit">
Feature
<span class="ic"></span>
</div>
<ul id="choose">
<volist name="t_list" id="item">
<li>
<a tcategory_id="{$item['category_id']}" href="javascript:Formsubmit('tcategory_id','{$item['category_id']}');">
<span class="spot"></span>{$item['category_name']}
</a>
</li>
</volist>
</ul>
</li>
<li>
<div class="subtit">
Connectivity
<span class="ic"></span>
</div>
<ul id="choose">
<volist name="l_list" id="item">
<li>
<a lcategory_id="{$item['category_id']}" href="javascript:Formsubmit('lcategory_id','{$item['category_id']}');">
<span class="spot"></span>{$item['category_name']}
</a>
 
</li>
</volist>
</ul>
</li>
<li>
<div class="subtit">
Network available
<span class="ic"></span>
</div>
<ul id="choose">
<volist name="w_list" id="item">
<li>
<a wcategory_id="{$item['category_id']}" href="javascript:Formsubmit('wcategory_id','{$item['category_id']}');">
<span class="spot"></span>{$item['category_name']}
</a>
</li>
</volist>
</ul>
</li>
</ul>
 
</div>
</div>
</form>
 
以下是JS部分：
<script>
$(function(){
<?php
if($obj){
echo 'var obj='.$obj.';';
}
?>
if(typeof(obj)!='undefined'){
for(k in obj){
$("#"+k).val(obj[k]);
$("a["+k+"="+obj[k]+"]").parent().addClass("on").siblings().removeClass("on");
}
}
})
</script>
 
<script>
function Formsubmit(a,b){
var $ = function(e){return document.getElementById(e);}
var inputs = $('ProductForm').getElementsByTagName('input'),results=[];
for(var i=0,l=inputs.length;i<l;i++){
if(inputs[i].getAttribute('to')=='condition'){
results.push(inputs[i]);
}
}
if($(a)){
$(a).value = b;
for(var j=0,len=results.length;j<len;j++){
if(results[j].value=='' || results[j].value=='0' ){
results[j].parentNode.removeChild(results[j]);
}
}
document.forms['ProductForm'].submit();
}
return false;
}
</script>