使用AJAX + 三级联动  实现分类出全国各地的省，市，区

也可以将下面的显示页面所写的 function循环，封装成js文件，就是在写代码软件里创建一个js文件，就和创建一个HTML或php文件一样。直接在显示页面引用！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="../jquery-1.11.2.min.js"></script>

<title>无标题文档</title>

</head>
<br />
<h1>使用ajax + 三级联动实现分类出全国各地的省，市，区</h1>
<div id="sj"></div>

<body>

<script type="text/javascript">

$(document).ready(function(e) {

    //在div里造下拉菜单

    $("#sj").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");

    //填充数据   使用Fill 关键字

    FillSheng();   //填充省的数据

    FillShi();    //填充市的数据

    FillQu();    //填充区的数据

    //填充省的方法

    function FillSheng(){

        var code = "";   //省的父级代号

        $.ajax({

            url:"sheng_2_chuli.php",

            data:{code:code},

            type:"POST",

            dataType:"TEXT",

            async:false,

            success: function(data){

                var hang = data.split("|");

                var str = "";

                    for(var i=;i<hang.length;i++){

                        var lie = hang[i].split("^");

                        str+="<option value='"+lie[]+"'>"+lie[]+"</option>";

                    }

                        //把所有<option>放到省的下拉列表里

                        $("#sheng").html(str);

                }

        });

    }

        //填充市的方法

        function FillShi(){

            var code = $("#sheng").val();  //市的父级代号

            $.ajax({

                url:"sheng_2_chuli.php",

                data:{code:code},

                type:"POST",

                dataType:"TEXT",

                async:false,

                success: function(data){

                    var hang = data.split("|");

                    var str = "";

                        for(var i=;i<hang.length;i++){

                            var lie = hang[i].split("^");

                            str+="<option value='"+lie[]+"'>"+lie[]+"</option>";

                        }

                            //把所有<option>放到市的下拉列表里

                            $("#shi").html(str);

                    }

            });

        }

            //填充区的方法

            function FillQu(){

                var code = $("#shi").val();  //区的父级代号

                $.ajax({

                    url:"sheng_2_chuli.php",

                    data:{code:code},

                    type:"POST",

                    dataType:"TEXT",

                    async:false,

                    success: function(data){

                        var hang = data.split("|");

                        var str = "";

                        for(var i=;i<hang.length;i++){

                            var lie = hang[i].split("^");

                            str+="<option value='"+lie[]+"'>"+lie[]+"</option>";

                        }

                        //把所有<option>放到区的下拉列表里

                        $("#qu").html(str);

                    }

                });

            }

            //当点击选择哪个省的时候，市和区一起变

            $("#sheng").change(function(){

                FillShi();

                FillQu();

                });

            //当点击选择哪个市的时侯，区一起变

            $("#shi").change(function(){

                FillQi();

                });

});

</script>

</body>

</html>

处理页面

<?php

include("../DBDA.class.php");

$db = new DBDA();

$pcode = $_POST["code"];

$sql = "select AreaCode,AreaName from chinastates where ParentAreaCode = '{$pcode}'";

echo $db->StrQuery($sql);

?>

使用 AJAX + 三级联动 实现分类出全国各地的省，市，区的更多相关文章

  1. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  2. 0509 关于Ajax + 三级联动示例

    关于Ajax 1.干什么的? ajax负责抓取用户名信息,传递给服务器进行校验: 2.属性: onreadystatechange:事件,该事件可以感知ajax状态(readyState)的变化.aj ...

  3. AJAX 三级联动

    新的封装类 <?php class DBDA { public $host="localhost";//服务器地址 public $uid="root"; ...

  4. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

  5. 2019.03.25 Ajax三级联动

    所谓三级联动就是,一层接着一层,根据上一层的选择给出这一层的结果 如选择市之后,会给出相应的区,然后到相应的县这就是联动 配置视图 ​from django.core import serialize ...

  6. [Ajax三级联动 无刷新]

    三级联动 的效果图 html页面: <body> <label class="fl">区域:</label> <select class= ...

  7. Ajax三级联动

    全国省市县查询 html代码 <!doctype html> <html> <head> <meta charset="utf-8"> ...

  8. ajax 三级联动商品分类（转载）

    转载  自  jines     http://www.cnblogs.com/lijinblogs/p/5759399.html 思路分析:效果:当页面加载时,利用ajax异步向后台请求数据,加载一 ...

  9. 省市区三级联动（附j全国省市区json文件）

    效果如图所示: 首先提供全国所有省份的JS文件 下载地址:https://files.cnblogs.com/files/likui-bookHouse/address.rar 打开js内容如下: h ...

随机推荐

  1. 通俗理解word2vec

    https://www.jianshu.com/p/471d9bfbd72f 独热编码 独热编码即 One-Hot 编码,又称一位有效编码,其方法是使用N位状态寄存器来对N个状态进行编码,每个状态都有 ...

  2. MySQL replicate-ignore-db详解

    1:官方的解释是:在主从同步的环境中,replicate-ignore-db用来设置不需要同步的库.解释的太简单了,但是里面还有很多坑呢. 生产库上不建议设置过滤规则.如果非要设置,那就用Replic ...

  3. C++11中的右值引用及move语义编程

    C++0x中加入了右值引用,和move函数.右值引用出现之前我们只能用const引用来关联临时对象(右值)(造孽的VS可以用非const引用关联临时对象,请忽略VS),所以我们不能修临时对象的内容,右 ...

  4. Oracle voting文件的管理

    在12c中,不再支持使用dd命令进行voting disk文件的备份和恢复 投票文件的管理需要OCR文件正常工作.在删除.添加.替换或者还原voting文件之前,使用ocrcheck检查ocr文件的状 ...

  5. 关于tcp中time_wait状态的4个问题

    time_wait是个常问的问题.tcp网络编程中最不easy理解的也是它的time_wait状态,这也说明了tcp/ip四次挥手中time_wait状态的重要性. 以下通过4个问题来描写叙述它 问题 ...

  6. 转 HashMap 比较透彻的分析

    HashMap 的实现原理 原文: HashMap 的实现原理 众所周知,HashMap是用来存储Key-Value键值对的一种集合,这个键值对也叫做Entry,而每个Entry都是存储在数组当中,因 ...

  7. MySQL-8.0.x 新特性之索引页合并

    [背景] 索引的重要是在些不表.在这里我想说的另一个问题:索引和数据一样在innodb中都是以page的形式来组织的,那么问题就来了. 比如果说索引 ix_person_name 的内容只要8个页面就 ...

  8. Socket网络编程--小小网盘程序(5)

    各位好呀!这一小节应该就是这个小小网盘程序的最后一小节了,这一节将实现最后的三个功能,即列出用户在服务器中的文件列表,还有删除用户在服务器中的文件,最后的可以共享文件给好友. 列出用户在服务器中的文件 ...

  9. 常见Python爬虫工具总结

    常见Python爬虫工具总结 前言 以前写爬虫都是用requests包,虽然很好用,不过还是要封装一些header啊什么的,也没有用过无头浏览器,今天偶然接触了一下. 原因是在处理一个错误的时候,用到 ...

  10. TCP中的KeepAlive与HTTP中的Keep-Alive

    KeepAlive 与 Keep-Alive 前言 昨天被问到了HTTP中Keep-Alive的概念,看名字我只知道是保持连接用的,但是对于他怎么结束连接,为什么要用他这些就不是很清楚了,今天查了一下 ...