コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > php教程 > PHP源码 > 本文

ajax级联菜单实现方法实例分析

PHP中文网
リリース： 2016-05-25 17:13:05
オリジナル
1061 人が閲覧しました

这篇文章主要介绍了ajax级联菜单实现方法,结合实例形式分析了基于ajax与后台php交互实现级联菜单功能的相关操作技巧,需要的朋友可以参考下

本文实例讲述了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
前の記事：php密保卡 次の記事：php站内搜索
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Laravel のブートストラップ モードで AWS PDF ファイルを表示する https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf のよ...
から 2024-04-04 22:16:18
0
1
1450
改訂されたタイトル: チェックボックスの選択に基づいて合計を計算する 私は単純な財務追跡アプリケーションを開発しています。アプリケーションには、すべての経費請求書が記載された表があり、合計金額は表の外側にあります。 JS または AJAX を使用して...
から 2024-04-04 13:45:50
0
1
3465
Ajax を使用したコンテンツの生成 - ID までスクロールできない ajax経由で取得したデータに基づいてページコンテンツを生成します。私が抱えている問題は、特定の ID までスクロールしたいときに、スクロールが起こらないか、間違った場所にスクロー...
から 2024-04-04 09:29:39
0
1
397
AjaxからDjangoに複数のリストを渡す方法 問題があり、リストからすべてのデータを取得したいので、現在、['[objectObject]','[objectObject]を印刷するときに、選択した項目の各データをループしてデ...
から 2024-04-03 23:20:06
0
1
362
Ajax と PHP を使用して CodeIgniter に複数の画像ファイルをアップロードする 複数の画像ファイルをサーバー側にアップロードするのに問題があります。誰かがコードのどこが間違っているのかを指摘してくれると助かります。最初は HTML コードがあります: <...
から 2024-04-03 22:35:03
0
1
318
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート