婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > Ajax+php實現商品分類三級聯動

Ajax+php實現商品分類三級聯動

熱門標簽:個人怎樣在百度地圖標注地名 云呼外撥網絡電話系統 越南河內地圖標注 機器人電銷騙局揭秘 騰訊地圖標注位置能用多久 硅語電話機器人公司 ai機器人電銷資源 地圖標注項目怎么樣 超級大富翁地圖標注

當頁面加載時,利用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);
?>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

您可能感興趣的文章:
  • PHP+Mysql+Ajax+JS實現省市區三級聯動
  • AJAX省市區三級聯動下拉菜單(java版)
  • ajax三級聯動下拉菜單效果
  • ajax三級聯動的實現方法
  • ajax實現無刷新省市縣三級聯動
  • ajax實現三級聯動的基本方法
  • Ajax商品分類三級聯動的簡單實現(案例)
  • ajax實現省市三級聯動效果
  • 簡單實現ajax三級聯動效果
  • AJAX實現省市縣三級聯動效果

標簽:內蒙古 林芝 鄭州 邢臺 舟山 洛陽 遼源 海南

巨人網絡通訊聲明:本文標題《Ajax+php實現商品分類三級聯動》,本文關鍵詞  Ajax+php,實現,商品,分類,;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《Ajax+php實現商品分類三級聯動》相關的同類信息!
  • 本頁收集關于Ajax+php實現商品分類三級聯動的相關信息資訊供網民參考!
  • 推薦文章
    主站蜘蛛池模板: 淳安县| 新民市| 汕尾市| 黄大仙区| 德阳市| 宣恩县| 尤溪县| 黎川县| 信宜市| 云南省| 瑞安市| 山阳县| 招远市| 余江县| 东乡族自治县| 葵青区| 孟津县| 三穗县| 温泉县| 湖南省| 鹤壁市| 大方县| 广西| 兖州市| 中江县| 淮南市| 垫江县| 定安县| 清水河县| 浏阳市| 乳源| 察雅县| 巴彦淖尔市| 子洲县| 鹤峰县| 东源县| 云梦县| 贡嘎县| 阿瓦提县| 康定县| 长宁县|