首页
所有分类
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 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
javascript题目，重写函数让其无限相加
Feb 15 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
JavaScript高级程序设计阅读笔记（十六） javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
js倒计时抢购实例
Dec 20 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
如何从头实现一个node.js的koa框架
Jun 17 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 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
hmac(1) requests(1) 相对路径 (1) 解密(1) hashlib(1) 相对路径(1) openpyxl(1) mt-swipe(1) 面向对象(3) Mint UI(1)
You might like
新的一年，新的期待：DC在2020年的四部动画电影
2020/01/01 欧美动漫
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
CSS和Javascript简单复习资料
2010/06/29 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
详解Anconda环境下载python包的教程（图形界面+命令行＋pycharm安装）
2019/11/11 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
一份报关员的职业规划范文
2014/01/08 职场文书
八年级生物教学反思
2014/01/22 职场文书
一月红领巾广播稿
2014/02/11 职场文书
新学期开学演讲稿
2014/05/24 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
校友回访母校寄语
2015/02/26 职场文书
画展观后感
2015/06/17 职场文书
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP