首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 28, 2016

本文实例讲述了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='"+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程序设计有所帮助。

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

- Author -

巴霍巴利

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
jquery ztree异步搜索（搜叶子）实践
Feb 25 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 #Javascript
JS两种类型的表单提交方法实例分析
Nov 28 #Javascript
简单实现JavaScript图片切换效果
Nov 28 #Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 #Javascript
JS调用打印机功能简单示例
Nov 28 #Javascript
完全深入学习Bootstrap表单
Nov 28 #Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 #Javascript
挪威购物网站(7) 芬兰购物网站(10) 意大利购物网站(128) 澳大利亚购物网站(309) 肯尼亚购物网站(2) 丹麦购物网站(22) 南非购物网站(8) 阿根廷购物网站(9) 比利时购物网站(33) 瑞典购物网站(55)
You might like
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
PHP实现简单的计算器
2020/08/28 PHP
一个JS翻页效果
2007/07/23 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)
2015/10/08 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
Python字符串格式化的方法（两种）
2017/09/19 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
Meli Melo官网：名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
Currentbody美国/加拿大：美容仪专家
2020/03/09 全球购物
四种会话跟踪技术
2015/05/20 面试题
质量月活动策划方案
2014/03/10 职场文书
员工安全承诺书
2014/05/22 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
新生儿未入户证明
2015/06/23 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
python获取字符串中的email
2022/03/31 Python