轉載 自 jines http://www.cnblogs.com/lijinblogs/p/5759399.htmlphp
思路分析:
效果:當頁面加載時,利用ajax異步向後臺請求數據,加載一級商品類別,當選擇一級商品時加載二級商品,選擇二級商品加載三級商品。html
實現:
一、當拿到數據後加載pid爲0的商品,並動態建立option將商品追加到一級菜單中,並設置value值
二、當選擇一級商品時加載pid=當前id的商品,並建立option將商品追加到二級菜單中,並設置value值
三、當選擇二級商品時加載pid=當前id的商品,並建立option將商品追加到三級菜單中,並設置value值ajax
頁面效果:編程
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 });
後臺代碼:json
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 ?>