首页
所有分类
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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
Moment的feature导致线上bug解决分析
Sep 23 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
lnmp(1) Windows server 2012(17) 伪静态(1) nginx(76) Rewrite(4) 组策略(1) destoon(1)  AD域(1) Centos(8) 日志格式分析(1)
You might like
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
关于jQuery object and DOM element
2013/04/15 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
教大家轻松制作Bootstrap漂亮表格（table）
2016/12/13 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python实现自动上京东抢手机
2018/02/06 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
精伦电子Java笔试题
2013/01/16 面试题
IBatis持久层技术
2016/07/18 面试题
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
人事助理自荐信
2014/02/02 职场文书
节约电力资源的建议书
2014/03/12 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
医德医风自我评价
2014/09/19 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
庆祝教师节标语
2014/10/09 职场文书
单位单身证明样本
2014/10/11 职场文书
丽江古城导游词
2015/02/03 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis