php js 二级联动_PHP+ajax实现二级联动菜单功能示例

本文实例讲述了PHP+ajax实现二级联动菜单功能。分享给大家供大家参考，具体如下：

如何实现二级联动

工作原理

二级联动在开发中是比较常见的一个技术点，它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新，它只会刷新我们需要改变值的地方，我们首先看下它的工作流程。

第一步：我们会向后台发送一个请求

第二步：后台接受请求后，会返回给我们一个值

第三步：将值用JS呈现在页面中

HTML代码

www.jb51.net 二级联动

#area-box{width:500px;height:400px;margin:0 auto;border:0px solid #dddddd;text-align:center;}

.area-select{width:200px;height:30px;margin-top:30px;margin-left:30px;}

请选择省份

四川

河北

湖南

请选择城市

$(function(){

//初始化数据

var url = 'address.php'; //后台地址

$("#address").change(function(){ //监听下拉列表的change事件

var address = $(this).val(); //获取下拉列表选中的值

//发送一个post请求

$.ajax({

type:'post',

url:url,

data:{key:address},

dataType:'json',

success:function(data){ //请求成功回调函数

var status = data.status; //获取返回值

var address = data.data;

if(status == 200){ //判断状态码，200为成功

var option = '';

for(var i=0;i

option +=''+address[i]+'';

}

}else{

var option = '请选择城市'; //默认值

}

$("#city").html(option); //js刷新第二个下拉框的值

});

PHP代码

$key = $_POST['key']; //获取值

$address[1] = array('成都','绵阳','德阳');

$address[2] = array('石家庄','唐山','秦皇岛');

$address[3] = array('长沙','株洲','湘潭');

if(!empty($address[$key])){ //有值，组装数据

$result['status'] = 200;

$result['data'] = $address[$key];

}else{ //无值，返回状态码220

$result['status'] = 220;

}

echo json_encode($result); //返回JSON数据

运行效果：

其实三级联动和二级联动的原理都是一样的，只是在其基础上在重复一次而已

希望本文所述对大家PHP程序设计有所帮助。

php js 二级联动_PHP+ajax实现二级联动菜单功能示例相关推荐

php下拉列表二级联动,PHP+Ajax实现二级联动下拉菜单！
正文字体大小: 中 PHP+Ajax实现二级联动下拉菜单! (2009-12-05 01:11:39) 标签: 杂谈数据库 .................................... ...
php mysql三级联动,PHP+mysql实现的三级联动菜单功能示例
本文实例讲述了php+mysql实现的三级联动菜单功能.分享给大家供大家参考,具体如下: 数据库mysql -- 数据库: `student` -- -- ---------------------- ...
mysql sqlite 分页查询_php基于SQLite实现的分页功能示例
本文实例讲述了php基于SQLite实现的分页功能.分享给大家供大家参考,具体如下: 这里操作数据库文件使用的是前面文章<PHP基于PDO实现的SQLite操作类[包含增删改查及事务等操作]&g ...
php四则运算出题器_PHP实现的简单四则运算计算器功能示例
本文实例讲述了PHP实现的简单四则运算计算器功能.分享给大家供大家参考,具体如下: php实现一个简单的四则运算计算器(还不支持括号的优先级).利用栈这种数据结构来计算表达式很赞. 这里可以使用栈的结 ...
php二层联动,php怎么实现二级联动菜单
php实现二级联动菜单的方法:首先创建好HTML文件和PHP文件:然后编写前端代码以及后端逻辑代码:接着向后台发送一个请求:最后将值用JS呈现在页面中即可. 本文操作环境:windows7系统.PHP ...
ajax实现二级联动
用js实现简单的ajax二级联动(如上图) HTML代码: 1 省份:<select id="province" onchange="getCity();" ...
ajax实现多级联动菜单,jquery 实现二级/三级/多级联动菜单的思路及代码
本文介绍使用jquery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级.三级或多级联动也可以按照此方法完成. 文章中涉及到的数据表为City,为方便管理. 设计此表如下 ID:自增 ...
php ajax二级联下拉菜单,ThinkPHP和Ajax 实现二级联动的下拉菜单
这篇文章主要介绍了关于ThinkPHP和Ajax 实现二级联动的下拉菜单,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下联动菜单的数据存在数据库,可以随时通过对数据库添加删除修改改变菜 ...
android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...
日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...

php js 二级联动_PHP+ajax实现二级联动菜单功能示例

php js 二级联动_PHP+ajax实现二级联动菜单功能示例相关推荐

最新文章

热门文章