ThinkPHP和Ajax 实现二级联动的下拉菜单

这篇文章主要介绍了关于ThinkPHP和Ajax 实现二级联动的下拉菜单，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

联动菜单的数据存在数据库，可以随时通过对数据库添加删除修改改变菜单数据，而不需修改代码，同时，实现了2级后，也可以实现3级，4级。。。等关联菜单

首先是数据库的设计。分类表叫cate.

我做的是分类数据的二级联动，数据需要的字段有：id,name(中文名),pid(父id).

父id的设置: 若数据没有上一级，则父id为0，若有上级，则父id为上一级的id。

数据库有内容后，就可以开始写代码，进行二级联动的实现。

先在后台php获取所有pid为0的数据，保存到$cate中，然后在第一层的中用foreach循环输出。

Html代码:

<select name="type" size="1" id="type">
    <option>请选择类型</option>
     <foreach name=&#39;cate&#39; item=&#39;v&#39;>
         <option value="{$v[&#39;ca_id&#39;]}">{$v.ca_name}</option>
     </foreach>
 </select>
 标签：
 <select name="lable" size="1" id="lables">
 </select>

Ajax代码：

 $('#type').click(function(){
            $(this).change(function(){
                var objectModel = {};
                var   value = $(this).val();
               var   type = $(this).attr('id');
                objectModel[type] =value;
                $.ajax({
                    cache:false,
                    type:"POST",
                    url:site.web+"lable",
                    dataType:"json",
                    data:objectModel,
                    timeout:30000,
                    error:function(){
                        alert(site.web+"lable");
                    },
                    success:function(data){
                        $("#lables").empty();
                        var count = data.length;
                        var i = 0;
                        var b="";
                           for(i=0;i<count;i++){
                               b+="<option value=&#39;"+data[i].ca_id+"&#39;>"+data[i].ca_name+"</option>";
                           }
                        $("#lables").append(b);
                    }
                });
               });
        }
    );

Ajax代码在第一层类型改变后触发,ajax方法的主要参数有

1.url:后台接收ajax的地址；

2.data:传到后台的数据，一般用json传递；这里传递的是选中类的id值。

3.type:传递方法，有get和post方法，我一般用post,可以传输的数据比get多，安全性也高些；

4.error:ajax执行失败的方法；

5.success:ajax执行成功的方法，也就是回调函数。这里在执行success时，我先用empty()清空了第二个下拉菜单的内容，然后再输出从后台获取的数据。

下面是Thinkphp接收ajax数据并处理的页面、

//后台ajax验证
  $result = array();
  $cate =$_POST['type'];
  $result = M('cate')->where(array('ca_pid'=> $cate))->field('ca_id,ca_name')->select();
  $this->ajaxReturn($result,"JSON");

Thinkphp的I()方法其实可以看成$_POST[],这样来获取ajax传递过来的第一层选中内容的id，接着，获取其子类，然后用ajaxReturn()返回给ajax,这里设置了返回数据以json形式，所以ajax会以json形式接收到数据

原生php的返回数据方式:

代码如下:

  //搜索结果为$result
   .....
   echo json_encode($result);

这样就完成了2级联动下拉菜单的实现，需要注意的是，url得保证正确，后台接收到也需要有返回值，不然ajax也不会执行success方法的。

以上就是本篇文章的全部内容了，感谢大家的阅读，更多内容请关注PHP中文网！

相关推荐：

PHP实现的消息实时推送功能【基于反ajax推送】

在Thinkphp中使用ajax实现无刷新分页的方法

以上是ThinkPHP和Ajax 实现二级联动的下拉菜单的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：

ajax thinkphp

来源：php.cn

上一篇：php图片文件操作封装类 下一篇：php设计模式基础知识与应用

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

• 编程是什么？
  2019-04-16 16:04:28
• 查找的快捷键是ctrl键加上什么键
  2020-09-15 11:26:00
• 剪切快捷键ctrl加什么？
  2020-09-10 14:26:14
• it是什么职业？
  2020-09-08 11:06:15
• ctrl加什么是保存？
  2020-09-09 09:46:36
• ctrl+t是什么快捷键？
  2020-10-12 14:51:04
• PS标尺怎么用？
  2020-09-10 14:40:02
• 编程适合什么人学？
  2019-04-24 16:20:55
• ps反向选区快捷键是什么？
  2020-10-13 11:40:03
• 如何在两个内联元素之间添加换行符
  2019-04-15 14:06:21

最新问题

composer安装workman，下载失败怎么办？下载其他的插件也出错 D:\phpstudy_pro\WWW\tpShop\thinkphp>composer require topthink/think-worker=2.0.*./compo...

来自于 2023-08-25 17:04:18

0

0

131

下载文件怎么关闭当前页面 使用thinkphp下载，成功。然后就停留在这个页面了，怎么下载或者取消后，关闭当前页面啊？

来自于 2023-05-08 21:54:29

0

2

376

让thinkphp如何在XAMPP环境下运行？？ 网上搜了一堆看不懂，这个网站也好像没有这方面的介绍啊,有这方面的搭建教程吗？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？...

来自于 2023-05-02 20:43:39

0

3

346

thinkphp 插入日期类型数据时的错误 thinkphp 插入日期类型数据时的错误:Invalid datetime format: 1292 Incorrect date value: '2023-03-17T16:0...

来自于 2023-03-18 06:44:10

0

1

335

thinkphp分页ranking字段排序问题 $model->order('ranking', 'asc')->page($page, $limit)->select()->toArray();我需要实...

来自于 2022-10-26 17:03:51

0

0

315

相关专题

更多>

• ajax教程
• ajax中文乱码解决方法
• ajax传递中文乱码怎么办
• thinkphp和laravel哪个简单
• thinkphp性能怎么样
• c++和python学习顺序推荐
• 云存储空间不足解决方法
• Matlab中length函数的用法

热门推荐

• Mac电脑设置hosts的方法（图文步骤）
• PHP快速搭建一个简单的QQ机器人
• API常用签名验证方法(PHP实现)
• PHP常用日期时间操作合集
• PHP生成图形验证码（加强干扰型）

热门教程

更多>

相关教程

热门推荐

最新课程

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1403074
• 
  php入门教程之一周学会PHP

  4230888
• 
  JAVA 初级入门视频教程

  2418382
• 
  小甲鱼零基础入门学习Python视频教程

  498153
• 
  PHP 零基础入门教程

  833977

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1403074次学习
• 
  JAVA 初级入门视频教程

  2418382次学习
• 
  小甲鱼零基础入门学习Python视频教程

  498153次学习
• 
  Web前端开发极速入门

  214173次学习
• 
  零基础精通 PS 视频教程

  858888次学习

• 
  【web前端】Node.js快速入门

  4673次学习
• 
  国外Web开发全栈课程全集

  3620次学习
• 
  Go语言实战之 GraphQL

  3111次学习
• 
  550W粉丝大佬手把手从零学JavaScript

  559次学习
• 
  python大神Mosh，零基础小白6小时完全入门

  16086次学习

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

• [表单按钮] jQuery企业留言表单联系代码
• [播放器特效] HTML5 MP3音乐盒播放特效
• [菜单导航] HTML5炫酷粒子动画导航菜单特效
• [表单按钮] jQuery可视化表单拖拽编辑代码
• [播放器特效] VUE.JS仿酷狗音乐播放器代码
• [html5特效] 经典html5推箱子小游戏
• [图片特效] jQuery滚动添加或减少图片特效
• [相册特效] CSS3个人相册封面悬停放大特效

• [前端模板] 家居装潢清洁维修服务公司网站模板
• [前端模板] 清新配色个人求职简历引导页模板
• [前端模板] 设计师创意求职简历网页模板
• [前端模板] 现代工程建筑公司网站模板
• [前端模板] 教育服务机构响应式HTML5模板
• [前端模板] 网上电子书店商城网站模板
• [前端模板] IT技术解决互联网公司网站模板
• [前端模板] 紫色风格外汇交易服务网站模板

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [前端模板] 家居装潢清洁维修服务公司网站模板
• [前端模板] 清新配色个人求职简历引导页模板
• [前端模板] 设计师创意求职简历网页模板
• [前端模板] 现代工程建筑公司网站模板
• [前端模板] 教育服务机构响应式HTML5模板
• [前端模板] 网上电子书店商城网站模板
• [前端模板] IT技术解决互联网公司网站模板
• [前端模板] 紫色风格外汇交易服务网站模板

关于我们 免责声明 Sitemap

PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！