如果您想在dedecms中实现二级联动筛选,可以按照以下步骤操作:
在后台建立两个分类,一个作为一级分类,另一个作为二级分类。
在模板页面中添加两个下拉框,分别对应一级分类和二级分类。
使用JavaScript代码,监听一级分类下拉框的值变化,根据变化的值向后台请求对应的二级分类数据,然后将二级分类数据填充到二级分类下拉框中。
在后台添加一个接口,用于接收一级分类的值,并返回对应的二级分类数据。
以下是一个简单的示例代码,用于实现二级联动筛选:
<selectid="category1">
<optionvalue="">请选择一级分类</option>
<optionvalue="1">分类1</option>
<optionvalue="2">分类2</option>
<optionvalue="3">分类3</option>
</select>
<selectid="category2">
<optionvalue="">请选择二级分类</option>
</select>
<script>
constcategory1=document.querySelector('#category1');
constcategory2=document.querySelector('#category2');
category1.addEventListener('change',async()=>{
constcategoryId=category1.value;
//向后台请求二级分类数据
constresponse=awaitfetch(`/api/category?parent_id=${categoryId}`);
constdata=awaitresponse.json();
//填充二级分类下拉框
category2.innerHTML=`
<optionvalue="">请选择二级分类</option>
${data.map(item=>`<optionvalue="${item.id}">${item.name}</option>`).join('')}
`;
});
</script>
在上面的代码中,我们通过监听category1的change事件,来获取一级分类下拉框当前选中的值,然后向后台发送请求,获取对应的二级分类数据,并将其填充到category2下拉框中。
注意:上面的示例代码中的后台接口地址和请求参数是假设的,您需要根据自己的实际情况来设置。
除了前端的代码,还需要在后台进行相应的配置,使得前端发送的请求能够正确地获取到需要的数据。以下是一个简单的示例代码,用于实现后台接口:
//假设接口地址为/api/category
//parent_id为一级分类的ID
functiongetSubCategories($parent_id){
//根据parent_id查询对应的二级分类数据
$sql="SELECT*FROM`dede_arctype`WHERE`reid`=$parent_id";
$result=mysql_query($sql);
$data=[];
while($row=mysql_fetch_assoc($result)){
$data[]=[
'id'=>$row['id'],
'name'=>$row['typename'],
];
}
header('Content-Type:application/json');
echojson_encode($data);
exit;
}
if($_SERVER['REQUEST_METHOD']==='GET'&&isset($_GET['parent_id'])){
$parent_id=intval($_GET['parent_id']);
getSubCategories($parent_id);
}
在上面的示例代码中,我们定义了一个getSubCategories函数,用于查询对应一级分类下的二级分类数据,并将其以JSON格式返回给前端。然后我们通过判断请求方法和请求参数,来决定是否调用getSubCategories函数来处理请求。
请注意,上面的示例代码仅供参考,实际应用时需要根据自己的需求进行相应的修改和优化,同时还需要注意安全性问题,避免SQL注入等漏洞。