DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> ajax級聯菜單實現方法實例分析
ajax級聯菜單實現方法實例分析
編輯：關於JavaScript     

本文實例講述了ajax級聯菜單實現方法。分享給大家供大家參考，具體如下：

效果如下：

選擇第一項，第二項、第三項的內容跟著改變。
選擇第二項，第三項的內容跟著改變。
第三項則不影響第一項和第二項。

有幾點值得提：

1.html到底是前台拼接還是後台拼接。

我選擇的是前台拼接，這樣可以節省流量，和後台的資源。這也比較符合程序處理，一般後台只負責提供數據。

通過json傳遞給前台，完了前台獲取進行處理。

ajax函數

function ajaxgetbigclass(val){
  $.ajax({
      type:"POST",
      async:false, 
      url:"/default/index/ajax/do/ajaxgetbigclass",
      data:"typeid="+val,
      success:function(response){
        if(response){
          res = response;
        }else{
          res = false;
        }
      }
    });
  return res;
}
function ajaxgetsmallclass(val){
  $.ajax({
      type:"POST",
      async:false, 
      url:"/default/index/ajax/do/ajaxgetsmallclass",
      data:"bigclassid="+val,
      success:function(response){
        if(response){
          res = response;
        }else{
          res = false;
        }
      }
    });
  return res;
}

後台ajax處理代碼

case 'ajaxgetbigclass': 
$typeid = trim($this->_getParam('typeid'));
$daoNews = new dao_news();
if(isset($typeid)){
  $bigClass = $daoNews->getBigClassByType($typeid,true);
  if($bigClass){
    $json = json_encode($bigClass);
    echo $json;
  }else{
    echo FALSE;
  }
}else{
  echo FALSE;
}
break;
case 'ajaxgetsmallclass': 
$bigclassid = trim($this->_getParam('bigclassid'));
$daoNews = new dao_news();
if(isset($bigclassid)){
  $smallClass = $daoNews->getSmallClassByBigClass($bigclassid,true);
  if($smallClass){
    $json = json_encode($smallClass);
    echo $json;
  }else{
    echo FALSE;
  }
}else{
  echo FALSE;
}
break;

調用ajax函數，並拼接成html函數

function setbigclass(id,flag){
    var flag = arguments[1] ? arguments[1] : false;//默認值
    var res = ajaxgetbigclass(id);
    //alert(res);
    if(res){
      myobj = eval(res);
      for(var i=0;i<myobj.length;i++){ 
          strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";
      } 
      $("#bigclassid").html(strHtml);
    }else{
      var strHtml = "<option value=''>無子選項</option>";
      $("#bigclassid").html(strHtml);
    }
    if(flag&&res){
      return myobj[0].id;
    }
}
function setsmallclass(id){
    var res = ajaxgetsmallclass(id);
    //alert(res);
    if(res){
      myobj = eval(res);
      var strHtml = "<option value=''>請選擇</option>";
      for(var i=0;i<myobj.length;i++){ 
          strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";
      } 
      $("#smallclassid").html(strHtml);
    }else{
      var strHtml = "<option value=''>請選擇</option><option value=''>無子選項</option>";
      $("#smallclassid").html(strHtml);
  }
}

主函數，事件動作

$(function(){
  //ajax級聯
  $("#typeid").change(function(){
    var id = $(this).val();
    var res = setbigclass(id,true);
    if(res){
      setsmallclass(res);
    }else{
      setsmallclass(0);
    }
  });
  $("#bigclassid").change(function(){
    var id = $(this).val();
    setsmallclass(id);
  });
});

2.後台查詢函數化。

public function getType($where = false, $order = 'typeid ASC', $pagesize = false, $offset = false, $count = false, $from = false, $join = false, $group = false){
    return $this->getData($this->_typename,$where,$order,$pagesize,$offset,$count,$from,$join,$group);
}
public function getTypeName($flag=false){
    $where = array();
    $aType = $this->getType($where);
    if($aType){
      if($flag){
        foreach ($aType as $key => $value) {
          $type[$key]['id'] = $value['typeid'];
          $type[$key]['name'] = $value['typename'];
        }
        return $type;
      }else{
        foreach ($aType as $key => $value) {
          $type[$value['typeid']] = $value['typename'];
        }
        return $type;
      }
    }else{
      return false;
    }
}
public function getBigClass($where = false, $order = 'BigClassID ASC', $pagesize = false, $offset = false, $count = false, $from = false, $join = false, $group = false){
    return $this->getData($this->_bigname,$where,$order,$pagesize,$offset,$count,$from,$join,$group);
}
public function getBigClassByType($typeid = 60,$flag=false){
    $where = array();
    $where['BigClass.typeid =?'] = array("type"=>1,"val"=>$typeid);
    //print_r($where);exit;
    $from = array('BigClassID',"BigClassName","convert(text,BigClassMaster) as BigClassMaster","typeid"); 
    $aBigClass = $this->getBigClass($where, false, false, false, false,$from);
    if($aBigClass){
      if($flag){
        foreach ($aBigClass as $key => $value) {
          $bigClass[$key]['id'] = $value['BigClassID'];
          $bigClass[$key]['name'] = $value['BigClassName'];
        }
        return $bigClass;
      }else{
        foreach ($aBigClass as $key => $value) {
          $bigClass[$value['BigClassID']] = $value['BigClassName'];
        }
        return $bigClass;
      }
    }else{
      return false;
    }
}
public function getSmallClass($where = false, $order = 'SmallClassID ASC', $pagesize = false, $offset = false, $count = false, $from = false, $join = false, $group = false){
    return $this->getData($this->_smallname,$where,$order,$pagesize,$offset,$count,$from,$join,$group);
}
public function getSmallClassByBigClass($BigClassID = 221,$flag=false){
    $where = array();
    $where['SmallClass.BigClassID =?'] = array("type"=>1,"val"=>$BigClassID);
    //print_r($where);exit;
    $aSmallClass = $this->getSmallClass($where);
    if($aSmallClass){
      if($flag){
        foreach ($aSmallClass as $key => $value) {
          $smallClass[$key]['id'] = $value['SmallClassID'];
          $smallClass[$key]['name'] = $value['smallclassname'];
        }
        return $smallClass;
      }else{
        foreach ($aSmallClass as $key => $value) {
          $smallClass[$value['SmallClassID']] = $value['smallclassname'];
        }
        return $smallClass;
      }
    }else{
      return false;
    }
}

這樣就可以多處使用，多種角度使用。

3.前台js，文件化，同一個功能的js放在一個js文件中。內容最後也函數化。

<script type="text/javascript" src="/js/news/cascade.js"></script>
<tr>
<td width="20%" height="56" align="right" >請選擇分類：</td>
<td width="80%" style="padding:10px;">
<select id="typeid" name="typeid" class=" ffb-input">
    <!--{html_options options=$aType selected=$aData.typeid|default:'0'}-->
</select>
>
<select id="bigclassid" name="bigclassid" class=" ffb-input">
    <!--{html_options options=$aBigClass selected=$aData.bigclassid|default:'0'}-->
</select>
>
<select id="smallclassid" name="smallclassid" class=" ffb-input">
    <option value="">請選擇</option>
    <!--{html_options class=" ffb-input" options=$aSmallClass selected=$aData.smallclassid|default:'0'}-->
</select>
</td>
</tr>

這樣會讓文件很清晰。

優化後的js

$(function(){
  //ajax級聯
  $("#typeid").change(function(){
    var id = $(this).val();
    setbigclass(id);
  });
  $("#bigclassid").change(function(){
    var id = $(this).val();
    setsmallclass(id);
  });
});
function setbigclass(id){
    var res = ajaxgetbigclass(id);
    var strHtml;
    if(res){
      myobj = eval(res);
      for(var i=0;i<myobj.length;i++){
          strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";
      } 
      $("#bigclassid").html(strHtml);
      $("#bigclassid").show().change();
    }else{
      $("#bigclassid").hide();
      $("#smallclassid").hide();
    }
}
function setsmallclass(id){
    var res = ajaxgetsmallclass(id);
    if(res){
      myobj = eval(res);
      var strHtml = "<option value=''>請選擇</option>";
      for(var i=0;i<myobj.length;i++){ 
          strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>";
      } 
      $("#smallclassid").html(strHtml);
      $("#smallclassid").show();
    }else{
      $("#smallclassid").hide();
  }
}
function ajaxgetbigclass(val){
  $.ajax({
      type:"POST",
      async:false, 
      url:"/default/index/ajax/do/ajaxgetbigclass",
      data:"typeid="+val,
      success:function(response){
        if(response){
          res = response;
        }else{
          res = false;
        }
      }
    });
  return res;
}
function ajaxgetsmallclass(val){
  $.ajax({
      type:"POST",
      async:false, 
      url:"/default/index/ajax/do/ajaxgetsmallclass",
      data:"bigclassid="+val,
      success:function(response){
        if(response){
          res = response;
        }else{
          res = false;
        }
      }
    });
  return res;
}

更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

關於JavaScript
AngularJS基礎 ng-readonly 指令簡單示例
AngularJS ng-readonly 指令AngularJS 實例設置輸入框為只讀:<!
JS應用在Firebug中的擴展架構模式
網頁制作Webjx文章簡介：全局變量是魔鬼，這句話在JavaScript存在的地方應該就是成立的，當
prototype框架中美元符號$用法分析
本文實例講述了prototype框架中美元符號$用法。分享給大家供大家參考，具體如下：prototy

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
js獲取GridView中行數據的兩種方法 JS實現放大、縮小及拖拽圖片的方法【可兼容IE、火狐】 百度地圖API之本地搜索與范圍搜索 javascript動畫之磁性吸附效果篇 js中的getAttribute方法教程使用示例 深入淺出講解ES6的解構 jquery獲得當前html頁面源碼的方法 Bootstrap3.0學習教程之JS折疊插件 JavaScript onkeydown事件入門實例教程(鍵盤某個按鍵被按下) 真正好用的js驗證上傳文件大小的簡單方法
熱門推薦
JavaScript訪問JSON數據 JS注冊/移除事件處理程序(ExtJS應用程序設計實戰) javascript編寫實用的省市選擇器 javascript框架設計讀書筆記之字符串的擴展和修復 javascript運算符——邏輯運算符全面解析 JavaScript實現cookie的寫入、讀取、刪除功能 Bootstrap Chart組件使用教程 淺談js圖片前端預覽之filereader和window.URL.createObjectURL JavaScript實用技巧(一)
大家都在看
由字體和插圖組成的交錯的圖形的精選LOGO IE8中動態創建script標簽onload無效的解決方法 使用CSS3+jquery.js 實現微信抽獎轉盤效果 Jquery實現動態切換圖片的方法 jq的show()方法 網站作品:三步法提高網站可用性實例 safari：webkit 漢化英文版的Dreamweaver CS5並自動提示jquery
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved