PHP网站开发中多条件组合搜索

创新互联建站是一家专业提供喀什企业网站建设,专注与网站制作、成都网站制作、H5网站设计、小程序制作等业务。10年已为喀什众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

>在一些电子商城或购物网站，我们经常都能看到多条件组合进行筛选产品，实现的方式有两种，一种是通过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。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容