Ajax+php realizes three-level linkage of product classification

This article mainly introduces Ajax php to realize three-level linkage of product classification, which has certain reference value. Interested friends can refer to it

When the page is loaded, ajax is used to asynchronously request the background Data, load the first-level product category, load the second-level product when the first-level product is selected, and load the third-level product when the second-level product is selected.

Implementation: 1. After getting the data, load the product with pid 0, and dynamically create an option to append the product to the first-level menu, and set the value
2. When selecting a 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
3. When selecting a second-level product, load the product with pid = current id, and Create an option to add the product to the third-level menu and set the value

Page effect:

$(function(){
  //请求路径
  var url="03goods.php";
  //option默认内容
  var option="<option value=&#39;0&#39;>未选择</option>";
  //获取jq对象
  var $sel1=$(".sel1");
  var $sel2=$(".sel2");
  var $sel3=$(".sel3");
  //自动生成一个<option>元素
  function createOption(value,text){
  var $option=$("<option></option>");
  $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);
  }
  });
 });

Backend code:

<?php
 header(&#39;Content-Type:text/html; charset=utf-8&#39;);
 //数据
 $arr=array(
 //array(分类id,分类名，分类的父id)
 array(&#39;id&#39;=>&#39;1&#39;,&#39;name&#39;=>&#39;数码产品&#39;,&#39;pid&#39;=>&#39;0&#39;),
 array(&#39;id&#39;=>&#39;2&#39;,&#39;name&#39;=>&#39;家电&#39;,&#39;pid&#39;=>&#39;0&#39;),
 array(&#39;id&#39;=>&#39;3&#39;,&#39;name&#39;=>&#39;书籍&#39;,&#39;pid&#39;=>&#39;0&#39;),
 array(&#39;id&#39;=>&#39;4&#39;,&#39;name&#39;=>&#39;服装&#39;,&#39;pid&#39;=>&#39;0&#39;),
 array(&#39;id&#39;=>&#39;5&#39;,&#39;name&#39;=>&#39;手机&#39;,&#39;pid&#39;=>&#39;1&#39;),
 array(&#39;id&#39;=>&#39;6&#39;,&#39;name&#39;=>&#39;笔记本&#39;,&#39;pid&#39;=>&#39;1&#39;),
 array(&#39;id&#39;=>&#39;7&#39;,&#39;name&#39;=>&#39;平板电脑&#39;,&#39;pid&#39;=>&#39;1&#39;),
 array(&#39;id&#39;=>&#39;8&#39;,&#39;name&#39;=>&#39;智能手机&#39;,&#39;pid&#39;=>&#39;5&#39;),
 array(&#39;id&#39;=>&#39;9&#39;,&#39;name&#39;=>&#39;功能机&#39;,&#39;pid&#39;=>&#39;5&#39;),
 array(&#39;id&#39;=>&#39;10&#39;,&#39;name&#39;=>&#39;电视机&#39;,&#39;pid&#39;=>&#39;2&#39;),
 array(&#39;id&#39;=>&#39;11&#39;,&#39;name&#39;=>&#39;电冰箱&#39;,&#39;pid&#39;=>&#39;2&#39;),
 array(&#39;id&#39;=>&#39;12&#39;,&#39;name&#39;=>&#39;智能电视&#39;,&#39;pid&#39;=>&#39;10&#39;),
 array(&#39;id&#39;=>&#39;13&#39;,&#39;name&#39;=>&#39;编程书籍&#39;,&#39;pid&#39;=>&#39;3&#39;),
 array(&#39;id&#39;=>&#39;14&#39;,&#39;name&#39;=>&#39;JavaScript&#39;,&#39;pid&#39;=>&#39;13&#39;),
 );
 //获取指定分类的商品
 function getByPid($arr,$pid){
 $result=array();
 foreach($arr as $v){
  if($v[&#39;pid&#39;]==$pid){
  $result[]=$v;
  }
 }
 return $result;
 }
 //获取请求参数
 $pid=isset($_GET[&#39;pid&#39;])?$_GET[&#39;pid&#39;]:&#39;0&#39;;

 $result=getByPid($arr,$pid);
 //输出json数据
 echo json_encode($result);
?>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About the output stream at the end of servlet in Ajax technology

Ajax technology composition and core principle analysis

Ajax asynchronous loading analysis

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