社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > ajax級聯選單實現方法實例分析

ajax級聯選單實現方法實例分析

高洛峰
發布： 2016-12-03 16:25:42
原創
1015 人瀏覽過

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

效果如下：

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=&#39;"+myobj[i].id+"&#39;>"+myobj[i].name+"</option>";
      } 
      $("#bigclassid").html(strHtml);
    }else{
      var strHtml = "<option value=&#39;&#39;>无子选项</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=&#39;&#39;>请选择</option>";
      for(var i=0;i<myobj.length;i++){ 
          strHtml+="<option value=&#39;"+myobj[i].id+"&#39;>"+myobj[i].name+"</option>";
      } 
      $("#smallclassid").html(strHtml);
    }else{
      var strHtml = "<option value=&#39;&#39;>请选择</option><option value=&#39;&#39;>无子选项</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 = &#39;typeid ASC&#39;, $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][&#39;id&#39;] = $value[&#39;typeid&#39;];
          $type[$key][&#39;name&#39;] = $value[&#39;typename&#39;];
        }
        return $type;
      }else{
        foreach ($aType as $key => $value) {
          $type[$value[&#39;typeid&#39;]] = $value[&#39;typename&#39;];
        }
        return $type;
      }
    }else{
      return false;
    }
}
public function getBigClass($where = false, $order = &#39;BigClassID ASC&#39;, $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[&#39;BigClass.typeid =?&#39;] = array("type"=>1,"val"=>$typeid);
    //print_r($where);exit;
    $from = array(&#39;BigClassID&#39;,"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][&#39;id&#39;] = $value[&#39;BigClassID&#39;];
          $bigClass[$key][&#39;name&#39;] = $value[&#39;BigClassName&#39;];
        }
        return $bigClass;
      }else{
        foreach ($aBigClass as $key => $value) {
          $bigClass[$value[&#39;BigClassID&#39;]] = $value[&#39;BigClassName&#39;];
        }
        return $bigClass;
      }
    }else{
      return false;
    }
}
public function getSmallClass($where = false, $order = &#39;SmallClassID ASC&#39;, $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[&#39;SmallClass.BigClassID =?&#39;] = array("type"=>1,"val"=>$BigClassID);
    //print_r($where);exit;
    $aSmallClass = $this->getSmallClass($where);
    if($aSmallClass){
      if($flag){
        foreach ($aSmallClass as $key => $value) {
          $smallClass[$key][&#39;id&#39;] = $value[&#39;SmallClassID&#39;];
          $smallClass[$key][&#39;name&#39;] = $value[&#39;smallclassname&#39;];
        }
        return $smallClass;
      }else{
        foreach ($aSmallClass as $key => $value) {
          $smallClass[$value[&#39;SmallClassID&#39;]] = $value[&#39;smallclassname&#39;];
        }
        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:&#39;0&#39;}-->
</select>
>
<select id="bigclassid" name="bigclassid" class=" ffb-input">
    <!--{html_options options=$aBigClass selected=$aData.bigclassid|default:&#39;0&#39;}-->
</select>
>
<select id="smallclassid" name="smallclassid" class=" ffb-input">
    <option value="">请选择</option>
    <!--{html_options class=" ffb-input" options=$aSmallClass selected=$aData.smallclassid|default:&#39;0&#39;}-->
</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[i].name+"";
      } 
      $("#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 = "";
      for(var i=0;i"+myobj[i].name+"";
      } 
      $("#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;
}
登入後複製


相關標籤：
ajax
來源：php.cn
上一篇：JS函數多個參數預設值指定方法分析 下一篇：jQuery select自動選取功能實作方法分析
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
在Laravel中以Bootstrap模式展示AWS PDF文件 我已經下載了awsurl，例如https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/655712202215174539...
來自於 2024-04-04 22:16:18
0
1
1450
修訂後的標題：根據複選框選擇計算總計 我正在開發一個簡單的財務追蹤應用程式。在應用程式中，有一個包含所有支出帳單的表格，然後是位於表格外部的總金額。我正在嘗試找到一種使用JS或AJAX的方法，以便當我選擇表行中的1個複...
來自於 2024-04-04 13:45:50
0
1
3465
使用 Ajax 產生內容 - 捲動到 Id 不起作用 我根據透過ajax取得的數據產生頁面內容。我遇到的問題是，當我想滾動到某個ID時，滾動要么不會發生，要么滾動到錯誤的位置。我一直在查看SO問答，但沒有找到任何好的解決方案。很多答案...
來自於 2024-04-04 09:29:39
0
1
397
傳遞多個列表從ajax到Django的方法 我有一個問題，我想從list獲取所有數據，所以我想循環所選項目中的每個數據並將其插入數據庫，目前，當我打印['[objectObject]','[objectObject]'],時...
來自於 2024-04-03 23:20:06
0
1
362
使用Ajax和PHP在CodeIgniter中上傳多個圖像文件 我在將多個圖像檔案上傳到伺服器端時遇到問題。如果有人能夠突出顯示程式碼的問題所在，那就太好了。最初有HTML程式碼：<labelclass="col-form-la...
來自於 2024-04-03 22:35:03
0
1
318
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板