首页
所有分类
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 相关文章推荐
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 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
flex(1) 柱状图(1) 追加文本(1) 文字识别(1) flex-shrink(1) 匹配文本(1) GNN(1) Pytesseract(1) SFTP(3) 图片模糊(1)
You might like
用PHP生成html分页列表的代码
2007/03/18 PHP
PHP 组件化编程技巧
2009/06/06 PHP
PHP 开发环境配置（测试开发环境）
2010/04/28 PHP
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
thinkphp 5框架实现登陆，登出及session登陆状态检测功能示例
2019/10/10 PHP
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
webpack打包js的方法
2018/03/12 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
详解基于Vue，Nginx的前后端不分离部署教程
2018/12/04 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
浅谈MySQL中的触发器
2015/05/05 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
彻底理解Python list切片原理
2017/10/27 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
Python简易版图书管理系统
2019/08/12 Python
python 公共方法汇总解析
2019/09/16 Python
Kendra Scott官网：美国领先的时尚配饰品牌
2020/10/22 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
学生自我鉴定范文
2013/10/04 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
户外亲子活动总结
2015/05/08 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python