创新互联建站是一家专业提供
喀什企业网站建设,专注与
网站制作、成都网站制作、
H5网站设计、小程序制作等业务。10年已为喀什众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
![](/upload/ad_content/jianzhan-5.jpg)
>在一些电子商城或购物网站,我们经常都能看到多条件组合进行筛选产品,实现的方式有两种,一种是通过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>
名称栏目:PHP网站开发中多条件组合搜索
网站链接:https://www.cdcxhl.com/article30/sjogso.html
成都网站建设公司_创新互联,为您提供标签优化、品牌网站设计、关键词优化、品牌网站建设、移动网站建设、自适应网站
广告
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联