在一些电子商城或购物网站，我们经常都能看到多条件组合进行筛选产品，实现的方式有两种，一种是通过AJAX，另一种是通过Form表单，两者的区别在于AJAX是不用刷新页面就能把搜索结果直接输出到页面上，给用户的体验也会比较好，但当搜索的条件过多时，AJAX的写法就会相对麻烦很多，所以我要介绍的是相对比较简单的Form表单的方式。
大概的效果如下：
下面直接贴出代码，使用时自行根据条件名称和条件数量进行修改对应参数就行。
因为我这里有四个搜索条件，所以我这里会有四个条件的隐藏标记用来记录搜索信息。
以下是条件列表，注意搜索条件的id命名都是不一样的
我这里是直接点击选择后就会直接提交表单了
后台的接收
后台这里需要把接收的到条件再传回来，因为大部分效果都是用过前端JS处理的。
通过上面这段代码，就能把之前选中的条件都加上选中效果。
下面直接贴出前端页面代码
<formid="ProductForm"name="form1"method="get"action="">
<inputid="category_id"type="hidden"value=""name="category_id"to="condition">
<inputid="tcategory_id"type="hidden"value=""name="tcategory_id"to="condition">
<inputid="wcategory_id"type="hidden"value=""name="wcategory_id"to="condition">
<inputid="lcategory_id"type="hidden"value=""name="lcategory_id"to="condition">
<divclass="leftbox">
<divclass="screen">
<ul>
<li>
<divclass="subtit">
Type
<spanclass="ic"></span>
</div>
<ulid="choose">
<volistname="proList"id="item">
<li>
<acategory_id="{$item['category_id']}"href="javascript:Formsubmit('category_id','{$item['category_id']}');">
<spanclass="spot"></span>{$item['category_name']}
</a>
</li>
</volist>
</ul>
</li>
<li>
<divclass="subtit">
Feature
<spanclass="ic"></span>
</div>
<ulid="choose">
<volistname="t_list"id="item">
<li>
<atcategory_id="{$item['category_id']}"href="javascript:Formsubmit('tcategory_id','{$item['category_id']}');">
<spanclass="spot"></span>{$item['category_name']}
</a>
</li>
</volist>
</ul>
</li>
<li>
<divclass="subtit">
Connectivity
<spanclass="ic"></span>
</div>
<ulid="choose">
<volistname="l_list"id="item">
<li>
<alcategory_id="{$item['category_id']}"href="javascript:Formsubmit('lcategory_id','{$item['category_id']}');">
<spanclass="spot"></span>{$item['category_name']}
</a>
</li>
</volist>
</ul>
</li>
<li>
<divclass="subtit">
Networkavailable
<spanclass="ic"></span>
</div>
<ulid="choose">
<volistname="w_list"id="item">
<li>
<awcategory_id="{$item['category_id']}"href="javascript:Formsubmit('wcategory_id','{$item['category_id']}');">
<spanclass="spot"></span>{$item['category_name']}
</a>
</li>
</volist>
</ul>
</li>
</ul>
</div>
</div>
</form>
以下是JS部分：
<script>
$(function(){
<?php
if($obj){
echo'varobj='.$obj.';';
}
?>
if(typeof(obj)!='undefined'){
for(kinobj){
$("#"+k).val(obj[k]);
$("a["+k+"="+obj[k]+"]").parent().addClass("on").siblings().removeClass("on");
}
}
})
</script>
<script>
functionFormsubmit(a,b){
var$=function(e){returndocument.getElementById(e);}
varinputs=$('ProductForm').getElementsByTagName('input'),results=[];
for(vari=0,l=inputs.length;i<l;i++){
if(inputs[i].getAttribute('to')=='condition'){
results.push(inputs[i]);
}
}
if($(a)){
$(a).value=b;
for(varj=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();
}
returnfalse;
}
</script>