Ajax商品分類三級聯動實現

標籤：

思路分析：
效果：當頁面載入時，利用ajax非同步向後台請求資料，載入一級商品類別，當選擇一級商品時載入二級商品，選擇二級商品載入三級商品。

實現：
1、當拿到資料後載入pid為0的商品，並動態建立option將商品追加到一級菜單中，並設定value值
2、當選擇一級商品時載入pid=當前id的商品，並建立option將商品追加到二級菜單中，並設定value值
3、當選擇二級商品時載入pid=當前id的商品，並建立option將商品追加到三級菜單中，並設定value值

頁面效果：

 1  $(function(){ 2            //請求路徑 3            var url="03goods.php"; 4            //option預設內容 5            var option="<option value=‘0‘>未選擇</option>"; 6            //擷取jq對象 7            var $sel1=$(".sel1"); 8            var $sel2=$(".sel2"); 9            var $sel3=$(".sel3");10            //自動產生一個<option>元素11            function createOption(value,text){12                var $option=$("<option></option>");13                $option.attr("value",value);14                $option.text(text);15                return $option;16            }17            //載入資料18            function ajaxSelect($select,id){19                //get請求20                $.get(url,{"pid":id},function(data){21                    $select.html(option);22                    for(var k in data ){23                        $select.append(createOption(data[k].id,data[k].name));24                    }25                },"json");26            }27 28            //自動載入第一個下拉式功能表29            ajaxSelect($sel1,"0");30 31            //選擇第一個下拉式功能表時載入第二個32             $sel1.change(function(){33                 var id=$sel1.val();34                 if(id=="0"){35                     $sel2.html(option);36                     $sel3.html(option);37                 }else{38                     ajaxSelect($sel2,id);39                 }40             });41 42            //選擇第二個下拉式功能表時載入第三個43            $sel2.change(function(){44                var $id=$sel2.val();45                if($id=="0"){46                    $sel3.html(option);47                }else{48                    ajaxSelect($sel3,$id);49                }50            });51        });

後台代碼：

 1 <?php 2     header(‘Content-Type:text/html; charset=utf-8‘); 3     //資料 4     $arr=array( 5      //array(分類id,分類名，分類的父id) 6      array(‘id‘=>‘1‘,‘name‘=>‘數位產品‘,‘pid‘=>‘0‘), 7      array(‘id‘=>‘2‘,‘name‘=>‘家電‘,‘pid‘=>‘0‘), 8      array(‘id‘=>‘3‘,‘name‘=>‘書籍‘,‘pid‘=>‘0‘), 9      array(‘id‘=>‘4‘,‘name‘=>‘服裝‘,‘pid‘=>‘0‘),10      array(‘id‘=>‘5‘,‘name‘=>‘手機‘,‘pid‘=>‘1‘),11      array(‘id‘=>‘6‘,‘name‘=>‘筆記本‘,‘pid‘=>‘1‘),12      array(‘id‘=>‘7‘,‘name‘=>‘平板電腦‘,‘pid‘=>‘1‘),13      array(‘id‘=>‘8‘,‘name‘=>‘智能手機‘,‘pid‘=>‘5‘),14      array(‘id‘=>‘9‘,‘name‘=>‘功能機‘,‘pid‘=>‘5‘),15      array(‘id‘=>‘10‘,‘name‘=>‘電視機‘,‘pid‘=>‘2‘),16      array(‘id‘=>‘11‘,‘name‘=>‘電冰箱‘,‘pid‘=>‘2‘),17      array(‘id‘=>‘12‘,‘name‘=>‘智能電視‘,‘pid‘=>‘10‘),18      array(‘id‘=>‘13‘,‘name‘=>‘編程書籍‘,‘pid‘=>‘3‘),19      array(‘id‘=>‘14‘,‘name‘=>‘JavaScript‘,‘pid‘=>‘13‘),20     );21     //擷取指定分類的商品22     function getByPid($arr,$pid){23         $result=array();24         foreach($arr as $v){25             if($v[‘pid‘]==$pid){26               $result[]=$v;27             }28         }29         return $result;30     }31     //擷取請求參數32     $pid=isset($_GET[‘pid‘])?$_GET[‘pid‘]:‘0‘;33 34     $result=getByPid($arr,$pid);35     //輸出json資料36     echo json_encode($result);37 ?>

 

Ajax商品分類三級聯動實現