<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PHP+ajax实现二级联动</title>
</head>
<body>
    <select id="province">
        <option value="0">请选择省份</option>
        <option value="1">北京</option>
        <option value="2">河北</option>
        <option value="3">山东</option>
    </select>
    <select id="city">
        <option value="0">请选择城市</option>
    </select>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
    $("#province").change(function(){
        var province = $(this).val(); // 获取province的value值
        if(province == 0){            // province为0的时候停止；否则
            return;
        }else{
            var url = 'demo.php';
            $.ajax({
                url: url,             // php的url路径
                type: 'post',
                data: {province:province},
                dataType: 'json',
                success: function(res) {
                    if(res.code == 200){
                        var option = '<option>请选择城市</option>';
                        var list = res.list;
                        for (var i = 0; i < list.length; i++) {   // 循环返回的值（城市）
                            option += "<option>" + list[i] + "</option>";
                        }
                    }else{
                        var option = '<option>请选择城市</option>';  // 请求失败（默认）
                    }
                    $("#city").html(option);    // js刷新第二个下拉框的值
                }
            })
        }
    })
})
</script>
</html>接下来为PHP代码，注释已表明；​
<?php
$province = $_POST['province'];       // 获取ajax传来的值
$list['1'] = ['朝阳', '海淀', '西城'];
$list['2'] = ['保定', '唐山', '邯郸'];
$list['3'] = ['济南', '菏泽', '日照'];
if($list[$province]){                 // 数组存在值的情况下
    echo json_encode(['code'=>200, 'list'=>$list[$province]]);  // 200成功，$list[$province]传递相应的数据
}else{
    echo json_encode(['code'=>500]);
}

PHP+ajax实现二级联动的更多相关文章

  1. 用户管理的设计--3.jquery的ajax实现二级联动

    页面效果 实现步骤 1.引入struts整合json的插件包 2.页面使用jquery的ajax调用二级联动的js //ajax的二级联动,使用选择的所属单位,查询该所属单位下对应的单位名称列表 fu ...

  2. Spring MVC中Ajax实现二级联动

    今天写项目遇到了二级联动,期间遇到点问题,写个博客记录一下. 后台Controller: @RequestMapping("/faultType") @ResponseBody p ...

  3. 使用jquery.ajax实现省市的二级联动(SSH架构)

    首先实现jquery ajax的二级联动 要下载个jquery.js 我在这里就不准备了 自行百度下载 背景介绍:通过部门的ID来查找部门下的所有班级 我实现二级联动的思路是:先查询所有部门 显示在页 ...

  4. asp.net DropDownList无刷新ajax二级联动实现详细过程

    只适合新手制作DropDownList无刷新ajax二级联动效果: 数据库实现,添加两表如图:表1,pingpai,表2,type,具体数据库实现看自己的理解: //页面主要代码: <asp:S ...

  5. 在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

    在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

  6. Asp.Net下，基于Jquery的Ajax二级联动

    最近做一个项目,要求实现二级联动效果.背景为:通过学院的选择,联动出专业选项.起初想直接用微软的控件实现Ajax效果,但是DropDownList控件会自动触发PostBack,在后台根本就不好控制, ...

  7. 利用Ajax和JSON实现关于查找省市名称的二级联动功能

    功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...

  8. Ajax实现的城市二级联动二

    上一篇联动一种只是城市用ajax请求获取并渲染,这里将省份也用ajax请求并渲染 1.HTML <select id="province"> <option> ...

  9. Ajax实现的城市二级联动一

    前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html <select id="province"> < ...

随机推荐

  1. WebApi 序列化 循环引用问题

    public static void Register(HttpConfiguration config) { // Web API 配置和服务 config.Formatters.Remove(co ...

  2. pyqt5在xp下的配置

    qt支持库得下载,pip的不行, designer在这个里面 https://sourceforge.net/projects/pyqt/files/PyQt5/PyQt-5.4.1/ python只 ...

  3. 单源最短路径算法——Dijkstra算法(迪杰斯特拉算法)

    一 综述 Dijkstra算法(迪杰斯特拉算法)主要是用于求解有向图中单源最短路径问题.其本质是基于贪心策略的(具体见下文).其基本原理如下: (1)初始化:集合vertex_set初始为{sourc ...

  4. 阿里四不像Fourinone

    阿里四不像——分布式核心技术框架 Fourinone https://blog.csdn.net/shero_zsmj/article/details/52277194

  5. 20165312 2017-2018-2《JAVA程序设计》第8周学习总结

    20165312 2017-2018-2<JAVA程序设计>第8周学习总结 一.第十二章知识点总结 进程与线程 进程是程序的一次动态执行进程,它对应了从代码加载.执行至执行完毕的一个完整过 ...

  6. 20165312 实验一 Java开发环境的熟悉

    20165312 实验一 Java开发环境的熟悉 一.实验内容及步骤 (一)使用JDK编译.运行简单的Java程序 Ctrl+Shift+T打开终端 输入cd cxgg20165312/test进入目 ...

  7. WordPress版微信小程序2.1.8版发布

    近来的工作比较多,同时也在思考这个项目未来的发展方向,尽管不断有新的wordpress站长,利用我的开源程序搭建了微信小程序,但个人对这个项目的热情日渐减少,促使我不断完善和维护这个开源项目的动力也再 ...

  8. Codeforces Round #551 (Div. 2) A-E

    A. Serval and Bus 算出每辆车会在什么时候上车, 取min即可 #include<cstdio> #include<algorithm> #include< ...

  9. 虚拟机安装centOs+网络配置(完整说明)

    1.新建虚拟机(标准)   选择 (我以后下安装操作系统)       选择Linux 操作系统 版本为CentOS(32位)     虚拟机的名称和位置任意       磁盘容量如下即可     设 ...

  10. win10 64 + VS2010 + Opencv 2.4.9 + HIKVISION(海康)

    海康相机型号:DS-2CD2512F-IS 参考连接http://blog.csdn.net/wanghuiqi2008/article/details/31404571 先上效果图 其中,在连接时遇 ...