How to implement Ajax's three-level linkage product classification-JS Tutorial-php.cn

How to implement Ajax's three-level linkage product classification

php中世界最好的语言

Release： 2018-04-03 17:26:17

Original

1704 people have browsed it

This time I will show you how to implement Ajax's three-level linkage product classification, and what are the precautions for implementing Ajax's three-level linkage product classification. The following is a practical case, let's take a look.

Idea analysis:

Effect: When the page is loaded, ajax is used to asynchronously request data from the background, load the first-level product category, and when the page is selected When selecting first-level products, load second-level products, and select second-level products to load third-level products.

Implementation:

1. After getting the data, load the product with pid 0, and dynamically create an option to add 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 secondary menu, and set the value Value

3. When selecting a secondary 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="<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);
        }
      });
    });

Copy after login

Backend code:

<?php
  header(&#39;Content-Type:text/html; charset=utf-8&#39;);
  //数据
  $arr=array(
   //array(分类id,分类名，分类的父id)
   array(&#39;id&#39;=>'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

I believe you have mastered the method after reading the case in this article, more exciting Please pay attention to other related articles on php Chinese website!