Simple implementation method of Ajax product classification three-level linkage-PHP Tutorial-php.cn

This article mainly brings you a simple implementation (case) of three-level linkage of Ajax product classification. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

Idea analysis:

Effect: When the page loads, use ajax to asynchronously request data from the background and load the first-level product category , when selecting the first-level product, load the second-level product, and when selecting the second-level product, load the third-level product.

Implementation:

#1. After getting the data, load the product with pid 0, and dynamically create an option to add the product Go to the first-level menu and set the value

2. When selecting the first-level product, load the product with pid = current id, and create an option to append the product to the second-level menu and set the value Value

3. When selecting a second-level product, load the product with pid = current id, create an option to append the product to the third-level menu, and set the value

Page effect:

$(function(){ //请求路径 var url="03goods.php"; //option默认内容 var option=""; //获取jq对象 var $sel1=$(".sel1"); var $sel2=$(".sel2"); var $sel3=$(".sel3"); //自动生成一个"); $option.attr("value",value); $option.text(text); return $option; } //加载数据 function ajaxSelect($select,id){ //get请求 $.get(url,{"pid":id},function(data){ $select.html(option); for(var k in data ){ $select.append(createOption(data[k].id,data[k].name)); } },"json"); } //自动加载第一个下拉菜单 ajaxSelect($sel1,"0"); //选择第一个下拉菜单时加载第二个 $sel1.change(function(){ var id=$sel1.val(); if(id=="0"){ $sel2.html(option); $sel3.html(option); }else{ ajaxSelect($sel2,id); } }); //选择第二个下拉菜单时加载第三个 $sel2.change(function(){ var $id=$sel2.val(); if($id=="0"){ $sel3.html(option); }else{ ajaxSelect($sel3,$id); } }); });

Copy after login

Backend code:

'1','name'=>'数码产品','pid'=>'0'), array('id'=>'2','name'=>'家电','pid'=>'0'), array('id'=>'3','name'=>'书籍','pid'=>'0'), array('id'=>'4','name'=>'服装','pid'=>'0'), array('id'=>'5','name'=>'手机','pid'=>'1'), array('id'=>'6','name'=>'笔记本','pid'=>'1'), array('id'=>'7','name'=>'平板电脑','pid'=>'1'), array('id'=>'8','name'=>'智能手机','pid'=>'5'), array('id'=>'9','name'=>'功能机','pid'=>'5'), array('id'=>'10','name'=>'电视机','pid'=>'2'), array('id'=>'11','name'=>'电冰箱','pid'=>'2'), array('id'=>'12','name'=>'智能电视','pid'=>'10'), array('id'=>'13','name'=>'编程书籍','pid'=>'3'), array('id'=>'14','name'=>'JavaScript','pid'=>'13'), ); //获取指定分类的商品 function getByPid($arr,$pid){ $result=array(); foreach($arr as $v){ if($v['pid']==$pid){ $result[]=$v; } } return $result; } //获取请求参数 $pid=isset($_GET['pid'])?$_GET['pid']:'0'; $result=getByPid($arr,$pid); //输出json数据 echo json_encode($result); ?>

Copy after login

Related recommendations:

jquery and ajax realize three-level linkage encapsulation and non-encapsulation of provinces and municipalities

Jquery, Ajax, xml to achieve three-level linkage menu effect

Simple method to achieve ajax three-level linkage effect

The above is the detailed content of Simple implementation method of Ajax product classification three-level linkage. For more information, please follow other related articles on the PHP Chinese website!