当页面加载时,利用ajax异步向后台请求数据,加载一级商品类别,当选择一级商品时加载二级商品,选择二级商品加载三级商品。 
实现:
1、当拿到数据后加载pid为0的商品,并动态创建option将商品追加到一级菜单中,并设置value值
2、当选择一级商品时加载pid=当前id的商品,并创建option将商品追加到二级菜单中,并设置value值
3、当选择二级商品时加载pid=当前id的商品,并创建option将商品追加到三级菜单中,并设置value值 
页面效果:
$(function(){
  //请求路径
  var url="03goods.php";
  //option默认内容
  var option="<option value='0'>未选择</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);
  }
  });
 });
后台代码:
<?php
 header('Content-Type:text/html; charset=utf-8');
 //数据
 $arr=array(
 //array(分类id,分类名,分类的父id)
 array('id'=>'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);
?>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
                                    标签:
                                        
                            ajax,php,三级联动
                                免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
                                如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
                            
                        暂无“Ajax+php实现商品分类三级联动”评论...
                                    稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新动态
2025年11月04日
                                2025年11月04日
                    - 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
 - 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
 - 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
 - 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
 - 群星《2024好听新歌42》AI调整音效【WAV分轨】
 - 王思雨-《思念陪着鸿雁飞》WAV
 - 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
 - 李健《无时无刻》[WAV+CUE][590M]
 - 陈奕迅《酝酿》[WAV分轨][502M]
 - 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
 - 群星《吉他王(黑胶CD)》[WAV+CUE]
 - 齐秦《穿乐(穿越)》[WAV+CUE]
 - 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
 - 邝美云《邝美云精装歌集》[DSF][1.6G]
 - 吕方《爱一回伤一回》[WAV+CUE][454M]
 
                        