本文實(shí)例講述了ajax級(jí)聯(lián)菜單實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
效果如下：
選擇第一項(xiàng)，第二項(xiàng)、第三項(xiàng)的內(nèi)容跟著改變。
選擇第二項(xiàng)，第三項(xiàng)的內(nèi)容跟著改變。
第三項(xiàng)則不影響第一項(xiàng)和第二項(xiàng)。
有幾點(diǎn)值得提：
1.html到底是前臺(tái)拼接還是后臺(tái)拼接。
我選擇的是前臺(tái)拼接，這樣可以節(jié)省流量，和后臺(tái)的資源。這也比較符合程序處理，一般后臺(tái)只負(fù)責(zé)提供數(shù)據(jù)。
通過json傳遞給前臺(tái)，完了前臺(tái)獲取進(jìn)行處理。
ajax函數(shù)
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;}后臺(tái)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;調(diào)用ajax函數(shù)，并拼接成html函數(shù)
function setbigclass(id,flag){ var flag = arguments[1] ? arguments[1] : false;//默認(rèn)值 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=''>無子選項(xiàng)</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=''>請(qǐng)選擇</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=''>請(qǐng)選擇</option><option value=''>無子選項(xiàng)</option>"; $("#smallclassid").html(strHtml); }}主函數(shù)，事件動(dòng)作
$(function(){ //ajax級(jí)聯(lián) $("#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.后臺(tái)查詢函數(shù)化。
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.前臺(tái)js，文件化，同一個(gè)功能的js放在一個(gè)js文件中。內(nèi)容最后也函數(shù)化。
<script type="text/javascript" src="/js/news/cascade.js"></script><tr><td width="20%" height="56" align="right" >請(qǐng)選擇分類：</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="">請(qǐng)選擇</option> <!--{html_options class=" ffb-input" options=$aSmallClass selected=$aData.smallclassid|default:'0'}--></select></td></tr>這樣會(huì)讓文件很清晰。
優(yōu)化后的js
$(function(){ //ajax級(jí)聯(lián) $("#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=''>請(qǐng)選擇</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;}更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
